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