How to store created elements in Cookies or localStorage using javascript?

I dynamically create some a tags with JavaScript when clicking on other elements. When I refresh the page, the created elements disappear. Is there a way to store the creation of the elements in a JavaScript cookie?

function showTab(ev) {

    let head = document.getElementById('heading');

    let node = document.createElement("a"); 

    node.classList.add("tab");

    node.appendChild(document.createTextNode(ev.target.innerHTML));

    head.appendChild(node); 

};

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

asked Nov 15 '18 at 7:19

temp

1239

When I refresh the page, the created elements disappear. Sure. It's designed by all the browsers.

– Foo
Nov 15 '18 at 7:22

I know that they do. But is there a way to prevent it.

– temp
Nov 15 '18 at 7:23

JS cookies

– Jean-Marc Zimmer
Nov 15 '18 at 7:23

@Jean-MarcZimmer But how to store the created elements there?

– temp
Nov 15 '18 at 7:25

1

Yes, you can save the outerHTML of the tag. When the page is loaded, check the cookie contains some tag or not. If contains, override it. If you are going to use cookie, make the string as short as possible before saving.

– Foo
Nov 15 '18 at 7:40

|
show 3 more comments

function showTab(ev) {

    let head = document.getElementById('heading');

    let node = document.createElement("a"); 

    node.classList.add("tab");

    node.appendChild(document.createTextNode(ev.target.innerHTML));

    head.appendChild(node); 

};

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

asked Nov 15 '18 at 7:19

temp

1239

When I refresh the page, the created elements disappear. Sure. It's designed by all the browsers.

– Foo
Nov 15 '18 at 7:22

I know that they do. But is there a way to prevent it.

– temp
Nov 15 '18 at 7:23

JS cookies

– Jean-Marc Zimmer
Nov 15 '18 at 7:23

@Jean-MarcZimmer But how to store the created elements there?

– temp
Nov 15 '18 at 7:25

1

Yes, you can save the outerHTML of the tag. When the page is loaded, check the cookie contains some tag or not. If contains, override it. If you are going to use cookie, make the string as short as possible before saving.

– Foo
Nov 15 '18 at 7:40

|
show 3 more comments

function showTab(ev) {

    let head = document.getElementById('heading');

    let node = document.createElement("a"); 

    node.classList.add("tab");

    node.appendChild(document.createTextNode(ev.target.innerHTML));

    head.appendChild(node); 

};

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

asked Nov 15 '18 at 7:19

temp

1239

function showTab(ev) {

    let head = document.getElementById('heading');

    let node = document.createElement("a"); 

    node.classList.add("tab");

    node.appendChild(document.createTextNode(ev.target.innerHTML));

    head.appendChild(node); 

};

javascript html cookies local-storage

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

asked Nov 15 '18 at 7:19

temp

1239

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

asked Nov 15 '18 at 7:19

temp

1239

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

edited Nov 15 '18 at 7:46

Mohammad

15.4k123461

asked Nov 15 '18 at 7:19

temp

1239

asked Nov 15 '18 at 7:19

temp

1239

asked Nov 15 '18 at 7:19

temp

1239

When I refresh the page, the created elements disappear. Sure. It's designed by all the browsers.

– Foo
Nov 15 '18 at 7:22

I know that they do. But is there a way to prevent it.

– temp
Nov 15 '18 at 7:23

JS cookies

– Jean-Marc Zimmer
Nov 15 '18 at 7:23

@Jean-MarcZimmer But how to store the created elements there?

– temp
Nov 15 '18 at 7:25

1

Yes, you can save the outerHTML of the tag. When the page is loaded, check the cookie contains some tag or not. If contains, override it. If you are going to use cookie, make the string as short as possible before saving.

– Foo
Nov 15 '18 at 7:40

|
show 3 more comments

When I refresh the page, the created elements disappear. Sure. It's designed by all the browsers.

– Foo
Nov 15 '18 at 7:22

I know that they do. But is there a way to prevent it.

– temp
Nov 15 '18 at 7:23

JS cookies

– Jean-Marc Zimmer
Nov 15 '18 at 7:23

@Jean-MarcZimmer But how to store the created elements there?

– temp
Nov 15 '18 at 7:25

1

Yes, you can save the outerHTML of the tag. When the page is loaded, check the cookie contains some tag or not. If contains, override it. If you are going to use cookie, make the string as short as possible before saving.

– Foo
Nov 15 '18 at 7:40

When I refresh the page, the created elements disappear. Sure. It's designed by all the browsers.

– Foo
Nov 15 '18 at 7:22

I know that they do. But is there a way to prevent it.

– temp
Nov 15 '18 at 7:23

JS cookies

– Jean-Marc Zimmer
Nov 15 '18 at 7:23

@Jean-MarcZimmer But how to store the created elements there?

– temp
Nov 15 '18 at 7:25

Yes, you can save the outerHTML of the tag. When the page is loaded, check the cookie contains some tag or not. If contains, override it. If you are going to use cookie, make the string as short as possible before saving.

– Foo
Nov 15 '18 at 7:40

|
show 3 more comments

3 Answers
3

active

oldest

votes

Cookies are probably not the right way to go about something like this as there are size limitations

A better approach would be to store added elements inside the browser's localStorage or indexedDB. You can see an example of the latter in this simple todo app: http://todomvc.com/examples/react/#/

If you inspect the localStorage on that todo example after adding some items, you will see that there is an array containing your entries in JSON format.

Depending on what type of information you need to save, you could either save the HTML directly, or you could save JSON containing the relevant information (tab name, link URL, etc).

I would recommend against saving the HTML directly in case you ever need to make changes to the HTML on your site. Your users would then be loading up outdated HTML.

edited Nov 15 '18 at 7:42

answered Nov 15 '18 at 7:36

Seanvm

1216

Thanks for the clear answer!

– temp
Nov 15 '18 at 7:42

1

@temp - I just made an edit regarding why I believe it would be a bad idea to save HTML directly.

– Seanvm
Nov 15 '18 at 7:43

Okay, got it. :)

– temp
Nov 15 '18 at 7:46

add a comment |

You can store outerHTML of created element in localStorage and get it on page load

var node = document.createElement("a");

node.classList.add("tab");

node.textContent = "new tag";     



var local = localStorage.getItem("html");

if (local == null){

  localStorage.setItem("html", node.outerHTML);

  console.log('HTML setted in localStorage');

} else

    console.log(local);

Because localStorage doesn't worked in snippet you should check it in jsfiddle

Note that if your html content is large you should consider max size of local storage

edited Nov 15 '18 at 7:43

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

Thanks, that's what I needed!

– temp
Nov 15 '18 at 7:42

add a comment |

Okay, I solved it like that:

// Restore



window.onload = function() {

let head = document.getElementById('heading');

archive = ;

key = allStorage();



for(var i=0; i<archive.length; i++){ 

    if(archive[i] != null){

        let node = document.createElement("a");

        node.classList.add("tab");

        node.innerHTML = key[i];



        head.appendChild(node);

    }

}

}





//Store all



function allStorage() {

keys = Object.keys(localStorage);           // Gibt alle Schlüssel zurück

archive = ;



for (var i=0; i< keys.length; i++) {

    archive.push(keys[i]);

}

return archive;

}

answered Nov 15 '18 at 11:04

temp

1239

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314241%2fhow-to-store-created-elements-in-cookies-or-localstorage-using-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Cookies are probably not the right way to go about something like this as there are size limitations

A better approach would be to store added elements inside the browser's localStorage or indexedDB. You can see an example of the latter in this simple todo app: http://todomvc.com/examples/react/#/

If you inspect the localStorage on that todo example after adding some items, you will see that there is an array containing your entries in JSON format.

Depending on what type of information you need to save, you could either save the HTML directly, or you could save JSON containing the relevant information (tab name, link URL, etc).

I would recommend against saving the HTML directly in case you ever need to make changes to the HTML on your site. Your users would then be loading up outdated HTML.

edited Nov 15 '18 at 7:42

answered Nov 15 '18 at 7:36

Seanvm

1216

Thanks for the clear answer!

– temp
Nov 15 '18 at 7:42

1

@temp - I just made an edit regarding why I believe it would be a bad idea to save HTML directly.

– Seanvm
Nov 15 '18 at 7:43

Okay, got it. :)

– temp
Nov 15 '18 at 7:46

add a comment |

Cookies are probably not the right way to go about something like this as there are size limitations

A better approach would be to store added elements inside the browser's localStorage or indexedDB. You can see an example of the latter in this simple todo app: http://todomvc.com/examples/react/#/

If you inspect the localStorage on that todo example after adding some items, you will see that there is an array containing your entries in JSON format.

Depending on what type of information you need to save, you could either save the HTML directly, or you could save JSON containing the relevant information (tab name, link URL, etc).

I would recommend against saving the HTML directly in case you ever need to make changes to the HTML on your site. Your users would then be loading up outdated HTML.

edited Nov 15 '18 at 7:42

answered Nov 15 '18 at 7:36

Seanvm

1216

Thanks for the clear answer!

– temp
Nov 15 '18 at 7:42

1

@temp - I just made an edit regarding why I believe it would be a bad idea to save HTML directly.

– Seanvm
Nov 15 '18 at 7:43

Okay, got it. :)

– temp
Nov 15 '18 at 7:46

add a comment |

Cookies are probably not the right way to go about something like this as there are size limitations

A better approach would be to store added elements inside the browser's localStorage or indexedDB. You can see an example of the latter in this simple todo app: http://todomvc.com/examples/react/#/

If you inspect the localStorage on that todo example after adding some items, you will see that there is an array containing your entries in JSON format.

Depending on what type of information you need to save, you could either save the HTML directly, or you could save JSON containing the relevant information (tab name, link URL, etc).

I would recommend against saving the HTML directly in case you ever need to make changes to the HTML on your site. Your users would then be loading up outdated HTML.

edited Nov 15 '18 at 7:42

answered Nov 15 '18 at 7:36

Seanvm

1216

Cookies are probably not the right way to go about something like this as there are size limitations

A better approach would be to store added elements inside the browser's localStorage or indexedDB. You can see an example of the latter in this simple todo app: http://todomvc.com/examples/react/#/

If you inspect the localStorage on that todo example after adding some items, you will see that there is an array containing your entries in JSON format.

Depending on what type of information you need to save, you could either save the HTML directly, or you could save JSON containing the relevant information (tab name, link URL, etc).

I would recommend against saving the HTML directly in case you ever need to make changes to the HTML on your site. Your users would then be loading up outdated HTML.

edited Nov 15 '18 at 7:42

answered Nov 15 '18 at 7:36

Seanvm

1216

edited Nov 15 '18 at 7:42

answered Nov 15 '18 at 7:36

Seanvm

1216

answered Nov 15 '18 at 7:36

Seanvm

1216

answered Nov 15 '18 at 7:36

Seanvm

1216

Thanks for the clear answer!

– temp
Nov 15 '18 at 7:42

1

@temp - I just made an edit regarding why I believe it would be a bad idea to save HTML directly.

– Seanvm
Nov 15 '18 at 7:43

Okay, got it. :)

– temp
Nov 15 '18 at 7:46

add a comment |

Thanks for the clear answer!

– temp
Nov 15 '18 at 7:42

1

@temp - I just made an edit regarding why I believe it would be a bad idea to save HTML directly.

– Seanvm
Nov 15 '18 at 7:43

Okay, got it. :)

– temp
Nov 15 '18 at 7:46

Thanks for the clear answer!

– temp
Nov 15 '18 at 7:42

@temp - I just made an edit regarding why I believe it would be a bad idea to save HTML directly.

– Seanvm
Nov 15 '18 at 7:43

Okay, got it. :)

– temp
Nov 15 '18 at 7:46

add a comment |

You can store outerHTML of created element in localStorage and get it on page load

var node = document.createElement("a");

node.classList.add("tab");

node.textContent = "new tag";     



var local = localStorage.getItem("html");

if (local == null){

  localStorage.setItem("html", node.outerHTML);

  console.log('HTML setted in localStorage');

} else

    console.log(local);

Because localStorage doesn't worked in snippet you should check it in jsfiddle

Note that if your html content is large you should consider max size of local storage

edited Nov 15 '18 at 7:43

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

Thanks, that's what I needed!

– temp
Nov 15 '18 at 7:42

add a comment |

You can store outerHTML of created element in localStorage and get it on page load

var node = document.createElement("a");

node.classList.add("tab");

node.textContent = "new tag";     



var local = localStorage.getItem("html");

if (local == null){

  localStorage.setItem("html", node.outerHTML);

  console.log('HTML setted in localStorage');

} else

    console.log(local);

Because localStorage doesn't worked in snippet you should check it in jsfiddle

Note that if your html content is large you should consider max size of local storage

edited Nov 15 '18 at 7:43

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

Thanks, that's what I needed!

– temp
Nov 15 '18 at 7:42

add a comment |

You can store outerHTML of created element in localStorage and get it on page load

var node = document.createElement("a");

node.classList.add("tab");

node.textContent = "new tag";     



var local = localStorage.getItem("html");

if (local == null){

  localStorage.setItem("html", node.outerHTML);

  console.log('HTML setted in localStorage');

} else

    console.log(local);

Because localStorage doesn't worked in snippet you should check it in jsfiddle

Note that if your html content is large you should consider max size of local storage

edited Nov 15 '18 at 7:43

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

You can store outerHTML of created element in localStorage and get it on page load

var node = document.createElement("a");

node.classList.add("tab");

node.textContent = "new tag";     



var local = localStorage.getItem("html");

if (local == null){

  localStorage.setItem("html", node.outerHTML);

  console.log('HTML setted in localStorage');

} else

    console.log(local);

Because localStorage doesn't worked in snippet you should check it in jsfiddle

Note that if your html content is large you should consider max size of local storage

edited Nov 15 '18 at 7:43

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

edited Nov 15 '18 at 7:43

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

answered Nov 15 '18 at 7:40

Mohammad

15.4k123461

Thanks, that's what I needed!

– temp
Nov 15 '18 at 7:42

add a comment |

Thanks, that's what I needed!

– temp
Nov 15 '18 at 7:42

Thanks, that's what I needed!

– temp
Nov 15 '18 at 7:42

add a comment |

Okay, I solved it like that:

// Restore



window.onload = function() {

let head = document.getElementById('heading');

archive = ;

key = allStorage();



for(var i=0; i<archive.length; i++){ 

    if(archive[i] != null){

        let node = document.createElement("a");

        node.classList.add("tab");

        node.innerHTML = key[i];



        head.appendChild(node);

    }

}

}





//Store all



function allStorage() {

keys = Object.keys(localStorage);           // Gibt alle Schlüssel zurück

archive = ;



for (var i=0; i< keys.length; i++) {

    archive.push(keys[i]);

}

return archive;

}

answered Nov 15 '18 at 11:04

temp

1239

add a comment |

Okay, I solved it like that:

// Restore



window.onload = function() {

let head = document.getElementById('heading');

archive = ;

key = allStorage();



for(var i=0; i<archive.length; i++){ 

    if(archive[i] != null){

        let node = document.createElement("a");

        node.classList.add("tab");

        node.innerHTML = key[i];



        head.appendChild(node);

    }

}

}





//Store all



function allStorage() {

keys = Object.keys(localStorage);           // Gibt alle Schlüssel zurück

archive = ;



for (var i=0; i< keys.length; i++) {

    archive.push(keys[i]);

}

return archive;

}

answered Nov 15 '18 at 11:04

temp

1239

add a comment |

Okay, I solved it like that:

// Restore



window.onload = function() {

let head = document.getElementById('heading');

archive = ;

key = allStorage();



for(var i=0; i<archive.length; i++){ 

    if(archive[i] != null){

        let node = document.createElement("a");

        node.classList.add("tab");

        node.innerHTML = key[i];



        head.appendChild(node);

    }

}

}





//Store all



function allStorage() {

keys = Object.keys(localStorage);           // Gibt alle Schlüssel zurück

archive = ;



for (var i=0; i< keys.length; i++) {

    archive.push(keys[i]);

}

return archive;

}

answered Nov 15 '18 at 11:04

temp

1239

Okay, I solved it like that:

// Restore



window.onload = function() {

let head = document.getElementById('heading');

archive = ;

key = allStorage();



for(var i=0; i<archive.length; i++){ 

    if(archive[i] != null){

        let node = document.createElement("a");

        node.classList.add("tab");

        node.innerHTML = key[i];



        head.appendChild(node);

    }

}

}





//Store all



function allStorage() {

keys = Object.keys(localStorage);           // Gibt alle Schlüssel zurück

archive = ;



for (var i=0; i< keys.length; i++) {

    archive.push(keys[i]);

}

return archive;

}

answered Nov 15 '18 at 11:04

temp

1239

answered Nov 15 '18 at 11:04

temp

1239

answered Nov 15 '18 at 11:04

temp

1239

answered Nov 15 '18 at 11:04

temp

1239

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

wu MZZH2XA69vxvh3b,iFux7JRZS JTL,QWnbn77214lN 8y,IHXKM qSyAOcwXWbq2KBIOw,HmDSSlx,8,3Yw4Hu6Lpe G,pF,v7DenlvERc

搜尋此網誌

Wsrtjtyk