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

Question

单击其他元素时，我会使用 JavaScript 动态创建一些 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); 
};

Answer 1

Cookie 可能不是解决此类问题的正确方法，因为存在 大小限制

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

如果您在添加一些项目后检查该待办事项示例上的 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 内容很大，您应该考虑本地存储的最大大小

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);           
archive = [];

for (var i=0; i< keys.length; i++) {
    archive.push(keys[i]);
}
return archive;
}