Question

点击其他元素时，我会使用JavaScript动态创建一些标签。当我刷新页面时，创建的元素消失。有没有办法将创建的元素存储在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); 
};

Answer 1

使用size limitations

可能不是正确的方法。

更好的方法是将添加的元素存储在浏览器的localStorage或indexedDB中。您可以在这个简单的待办事项应用程序中查看后者的示例：http://todomvc.com/examples/react/#/

如果在添加某些项目后检查该todo示例上的localStorage，您将看到存在一个数组，其中包含JSON格式的条目。

根据需要保存的信息类型，可以直接保存HTML，也可以保存包含相关信息（选项卡名称，链接URL等）的JSON。

如果您需要对网站上的HTML进行更改，建议不要直接保存HTML。然后，您的用户将加载过时的HTML。

Answer 2

您可以将创建的元素outerHTML存储在localStorage中，并在页面加载时获取它

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);

由于localStorage在摘要中不起作用，因此您应在jsfiddle中对其进行检查

请注意，如果您的html内容很大，则应考虑max size of local storage

Answer 3

好的，我这样解决了：

// 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;
}

如何使用JavaScript将创建的元素存储在Cookies或localStorage中？

3 个答案: