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，刷新后保存元素

1 个答案: