从localStorage读取li元素显示[object HTMLLIElement]而非文本的问题

你遇到的[object HTMLLIElement]问题，核心原因是localStorage只能存储字符串类型数据。当你直接把DOM元素（比如创建的saveInfo这个<li>对象）存入localStorage时，浏览器会自动调用该对象的toString()方法，将其转换为默认的字符串表示[object HTMLLIElement]，所以读取时自然只会得到这个无效内容。

需要修改存储逻辑，不要存DOM元素本身，而是存储元素的数据内容或HTML字符串（推荐存数据，更灵活易维护），读取时再重新构建DOM元素。

1. 修改保存逻辑：存储数据而非DOM元素 #

把需要保存的统计数据提取为对象，转成JSON字符串后存入localStorage：

const savedEntries = [];

saveBtn.addEventListener("click", () => {
  // 提取要保存的核心数据
  const saveData = {
    found: foundNumber.textContent,
    notFound: notFoundNumber.textContent,
    archive: archiveNumber.textContent,
    total: totalOfAllNumbers.textContent
  };

  // 创建li元素
  const saveInfo = document.createElement("li");
  saveInfo.innerHTML = `Found: ${saveData.found} | Not Found: ${saveData.notFound} | Archive: ${saveData.archive} | Total: ${saveData.total}`;
  saveInfo.classList.add("li");

  // 创建删除按钮
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "X";
  deleteBtn.classList.add("btn", "li", "delete-btn");
  saveInfo.appendChild(deleteBtn);

  // 添加到页面
  ul.appendChild(saveInfo);
  // 用数组长度作为索引，将数据转成JSON字符串存入localStorage
  const index = savedEntries.length;
  localStorage.setItem(index, JSON.stringify(saveData));
  savedEntries.push(saveData); // 数组现在存储数据而非DOM元素

  // 删除按钮逻辑
  deleteBtn.onclick = () => {
    saveInfo.style.display = "none";
    savedEntries.splice(index, 1);
    localStorage.removeItem(index);
  };
});

2. 修改读取逻辑：从JSON重建DOM元素 #

读取时把localStorage里的JSON字符串转成对象，再重新构建<li>和删除按钮：

window.addEventListener("load", () => {
  if (localStorage.length !== 0) {
    ulDiv.style.display = "block";

    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      // 将JSON字符串转回数据对象
      const savedData = JSON.parse(localStorage.getItem(key));
      
      // 重建li元素
      const item = document.createElement("li");
      item.innerHTML = `Found: ${savedData.found} | Not Found: ${savedData.notFound} | Archive: ${savedData.archive} | Total: ${savedData.total}`;
      item.classList.add("li");

      // 重建删除按钮并绑定事件
      const deleteBtn = document.createElement("button");
      deleteBtn.textContent = "X";
      deleteBtn.classList.add("btn", "li", "delete-btn");
      item.appendChild(deleteBtn);

      deleteBtn.onclick = () => {
        item.style.display = "none";
        localStorage.removeItem(key);
      };

      ul.appendChild(item);
    }
  } else {
    ulDiv.style.display = "none";
  }
});

额外优化点 #

• 原代码中savedEntries.forEach会在每次点击保存按钮时，把数组里所有元素重新添加到页面，导致重复渲染，现在改为直接添加当前创建的saveInfo即可。
• 存储数据而非DOM元素，后续如果需要修改统计项的展示格式，只需要修改HTML模板即可，无需修改存储逻辑。

内容的提问来源于stack exchange，提问作者Jashawn Rogers