InsertAdjacentHTML，元素刷新后保存

Question

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

示例代码：

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

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

Answer 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）

InsertAdjacentHTML，元素刷新后保存

InsertAdjacentHTML, element saves after refresh

javascript

insertadjacenthtml