如何通过类选择器与querySelectorAll在LocalStorage存储HTML元素及值

你遇到的核心问题是直接把querySelectorAll返回的NodeList存进了LocalStorage——LocalStorage只能存字符串，NodeList被自动转成了"[object NodeList]"，所以读取后显示的就是这个无效字符串。要解决这个问题，我们需要把任务的数据内容（而非DOM元素本身）转成JSON字符串存储，读取时再根据数据重建HTML元素。

方案一：存储任务数据（推荐） #

这种方式更灵活，也更符合LocalStorage的使用场景，只存必要的输入值，读取时再重建元素：

// Implementing local storage
document.addEventListener("DOMContentLoaded", function() {
  // 保存任务到LocalStorage
  sct1SaveToLocalStorageBtn.addEventListener("click", () => {
    // 把NodeList转成数组，遍历提取每个任务的输入值
    const taskData = Array.from(document.querySelectorAll(".task-table-child")).map(taskItem => {
      // 这里要和你添加任务时的input/select类名对应，比如假设两个input类名是task-input-1、task-input-2，select类名是task-select
      const input1Val = taskItem.querySelector(".task-input-1").value;
      const input2Val = taskItem.querySelector(".task-input-2").value;
      const selectVal = taskItem.querySelector(".task-select").value;
      return { input1Val, input2Val, selectVal };
    });
    // 转成JSON字符串存储
    localStorage.setItem("taskTableContentKey", JSON.stringify(taskData));
    alert("内容已保存 :D");
  });

  // 从LocalStorage加载任务
  sct1LoadFromLocalStorageBtn.addEventListener("click", () => {
    // 读取并解析JSON，空值时默认返回空数组
    const loadedTaskData = JSON.parse(localStorage.getItem("taskTableContentKey")) || [];
    // 先清空容器
    sct1taskTable.innerHTML = "";
    // 遍历数据，逐个重建任务元素
    loadedTaskData.forEach(data => {
      const taskChild = document.createElement("div");
      taskChild.className = "task-table-child";
      // 这里的HTML结构要和你添加任务时的结构完全一致
      taskChild.innerHTML = `
        <input class="task-input-1" type="text" value="${data.input1Val}">
        <input class="task-input-2" type="text" value="${data.input2Val}">
        <select class="task-select">
          <!-- 这里替换成你实际的下拉选项 -->
          <option value="option1" ${data.selectVal === "option1" ? "selected" : ""}>选项1</option>
          <option value="option2" ${data.selectVal === "option2" ? "selected" : ""}>选项2</option>
          <option value="option3" ${data.selectVal === "option3" ? "selected" : ""}>选项3</option>
        </select>
      `;
      sct1taskTable.appendChild(taskChild);
    });
    alert("内容已加载 :D");
  });
});

方案二：存储完整HTML（适合简单结构） #

如果你想直接存储元素的HTML结构，需要先把用户输入的内容同步到元素的属性中（因为outerHTML默认只保留初始值，不会同步用户输入的内容），再转成字符串存储：

// Implementing local storage
document.addEventListener("DOMContentLoaded", function() {
  // 保存任务到LocalStorage
  sct1SaveToLocalStorageBtn.addEventListener("click", () => {
    const taskElements = Array.from(document.querySelectorAll(".task-table-child")).map(item => {
      // 同步input的value到元素属性
      item.querySelectorAll("input").forEach(input => {
        input.setAttribute("value", input.value);
      });
      // 同步select的选中状态到option属性
      item.querySelectorAll("select").forEach(select => {
        const selectedVal = select.value;
        select.querySelectorAll("option").forEach(opt => {
          if (opt.value === selectedVal) {
            opt.setAttribute("selected", "");
          } else {
            opt.removeAttribute("selected");
          }
        });
      });
      // 返回元素的完整HTML字符串
      return item.outerHTML;
    });
    localStorage.setItem("taskTableContentKey", JSON.stringify(taskElements));
    alert("内容已保存 :D");
  });

  // 从LocalStorage加载任务
  sct1LoadFromLocalStorageBtn.addEventListener("click", () => {
    const loadedElements = JSON.parse(localStorage.getItem("taskTableContentKey")) || [];
    // 把所有HTML字符串拼接后插入容器
    sct1taskTable.innerHTML = loadedElements.join("");
    alert("内容已加载 :D");
  });
});

关键说明 #

• LocalStorage仅支持存储字符串，所以必须把复杂数据（对象、数组）转成JSON字符串再存储，读取时解析回原格式。
• 不要直接存储DOM元素/NodeList，这类对象无法被LocalStorage正确序列化，只会变成无用的[object NodeList]字符串。

内容的提问来源于stack exchange，提问作者Ya Yeet