2

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); 
};
Mohammad
  • 21,175
  • 15
  • 55
  • 84
temp
  • 519
  • 7
  • 18
  • `When I refresh the page, the created elements disappear.` Sure. It's designed by all the browsers. – Tân Nov 15 '18 at 07:22
  • I know that they do. But is there a way to prevent it. – temp Nov 15 '18 at 07:23
  • [JS cookies](https://www.w3schools.com/js/js_cookies.asp) – Jean-Marc Zimmer Nov 15 '18 at 07:23
  • @Jean-MarcZimmer But how to store the created elements there? – temp Nov 15 '18 at 07:25
  • There is no way to `prevent`. You can convert the tag as a string, then you save it in cookie or [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). But don't forget that they can be cleared easily by user. – Tân Nov 15 '18 at 07:27
  • `document.cookie = "username=John Doe; expires=Fri, 18 Dec 2020 12:00:00 UTC";` will create a cookie that remains until December 2020 – Jean-Marc Zimmer Nov 15 '18 at 07:27
  • @TânNguyễn So I can't store the node in a cookie but have to convert it to a String to store it? – temp Nov 15 '18 at 07:36
  • 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. – Tân Nov 15 '18 at 07:40

3 Answers3

1

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.

Seanvm
  • 394
  • 1
  • 9
1

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

Mohammad
  • 21,175
  • 15
  • 55
  • 84
0

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;
}
temp
  • 519
  • 7
  • 18