InsertAdjacentHTML，元素在刷新后保存答案

【问题标题】：InsertAdjacentHTML, element saves after refreshInsertAdjacentHTML，元素在刷新后保存
【发布时间】：2018-07-23 04:49:20
【问题描述】：

我可以添加我想要的元素，但刷新后它们消失了。使用insertAdjacementHTML 时如何让元素永久保存，还是需要使用其他方法？

示例代码：

function itemAdder () {
    var header = document.querySelector(".list-group");
    header.insertAdjacentHTML("beforeend", '<a>Item 1</a>')
};

document.getElementById("circle-add").addEventListener("click", itemAdder)

【问题讨论】：

标签： javascript insertadjacenthtml

【解决方案1】：

每次添加项目时，您可以将容器的当前innerHTML 保存在localStorage 中，并在页面加载时，如果localStorage 中存在任何内容，则使用存储的内容填充容器：

var header = document.querySelector(".list-group");
if (localStorage.headerHTML) header.innerHTML = localStorage.headerHTML;

function itemAdder () {
    header.insertAdjacentHTML("beforeend", '<a>Item 1</a>')
    localStorage.headerHTML = header.innerHTML;
}

document.getElementById("circle-add").addEventListener("click", itemAdder)

（希望您也有办法删除项目 - 删除时，使用同一行 localStorage.headerHTML = header.innerHTML; 再次保存 HTML）

【讨论】：

只是为了澄清我的理解：第二行检查标题中是否设置了任何内容并将其重置为最近添加的内容？
检查localStorage的headerHTML属性中是否存在任何内容。实际的 header 不会跨页面会话持续存在，只有 localStorage 属性可以。