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

【问题标题】：How to store created elements in Cookies or localStorage using javascript?如何使用 javascript 将创建的元素存储在 Cookie 或 localStorage 中？
【发布时间】：2019-04-18 05:57:17
【问题描述】：

单击其他元素时，我使用 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); 
};

【问题讨论】：

When I refresh the page, the created elements disappear. 当然。它是由所有浏览器设计的。
我知道他们会这样做。但是有没有办法阻止它。
JS cookies
@Jean-MarcZimmer 但是如何将创建的元素存储在那里？
可以，可以保存标签的outerHTML。当页面加载时，检查 cookie 是否包含一些标签。如果包含，覆盖它。如果您要使用 cookie，请在保存之前使字符串尽可能短。

标签： javascript html cookies local-storage

【解决方案1】：

Cookie 可能不是处理此类事情的正确方法，因为有 size limitations

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

如果您在添加一些项目后检查该待办事项示例中的 localStorage，您会看到有一个数组包含您的 JSON 格式的条目。

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

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

【讨论】：

@temp - 我刚刚编辑了为什么我认为直接保存 HTML 是个坏主意。
好的，知道了。 :)

【解决方案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 在 sn-p 中不起作用，您应该在jsfiddle 中检查它

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

【讨论】：

谢谢，这正是我所需要的！

【解决方案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;
}

【讨论】：