如何使用类选择器querySelectorAll在本地存储中设置元素及其值？

Question

• 我正在尝试创建一个待办事项列表，现在当我按下添加任务按钮时，将创建 2 个输入和 1 个选择元素并显示在页面上。我保存内容并显示它，它只是节点列表字符串

现在我知道querySelectorAll给出了一个nodeList，而本地存储仅存储字符串。

• 如何使节点列表显示为 HTML 元素及其值而不是节点列表字符串？
• 我的损坏代码：

//Implementing local storage
document.addEventListener("DOMContentLoaded",function() {
//Save sct1taskTable into localStorage
sct1SaveToLocalStorageBtn.addEventListener("click",() => {
        const taskTableContent = document.querySelectorAll(".task-table-child");
        localStorage.setItem("taskTableContentKey",taskTableContent);
        alert("Content saved :D");

})
//Retrieve sct1taskTable into localStorage
sct1LoadFromLocalStorageBtn.addEventListener("click",() => {
        const loadedTaskTableContent = localStorage.getItem("taskTableContentKey");
        sct1taskTable.innerHTML = loadedTaskTableContent;
        alert("Content loaded :D")
})
});

Answer 1

你可以改变你的方法。您的目标是存储待办事项列表数据，然后恢复它。该数据不一定是 HTML 节点；也可以是 HTML 节点。它可以是一个对象。当您恢复节点时，使用存储的对象数据重新创建节点。

sct1SaveToLocalStorageBtn.addEventListener("click", () => {
  const taskTableContent = document.querySelectorAll(".task-table-child").map((el) => el.innerText);
  localStorage.setItem("taskTableContentKey", taskTableContent);
  alert("Content saved :D");

})
//Retrieve sct1taskTable into localStorage
sct1LoadFromLocalStorageBtn.addEventListener("click", () => {
  const loadedTaskTableContent = localStorage.getItem("taskTableContentKey");
  loadedTaskTableContent.forEach((text) => {
    const div = document.createElement('div');
    div.innerText = text;

    sct1taskTable.append(div);
  })

  alert("Content loaded :D")
})