显示 localStorage 项目返回 [object HTMLLIElement] 而不是 li 文本

Question

在这里学习

我的目标是显示已保存到本地存储的 li 条目的 HTML。我的问题是，当我尝试显示上述 li 条目时，我只会返回“[object HTMLLIElement]”。我到处搜索但似乎找不到适合我的案例的解决方案。

不确定我是否偏离了这个目标，看到这个模式是其他问题的解决方案，但在底部的 for 循环中，我试图设置

item.innerHTML = localStorage.getItem(localStorage.key(i).innerHTML);

在我的情况下不起作用。

任何帮助将不胜感激，因为这让我很头疼哈哈

这里是我将 li 条目保存到 localStorage 的地方：

const savedEntries = [];

saveBtn.addEventListener("click", () => {
  const saveInfo = document.createElement("li");
  saveInfo.innerHTML = `Found: ${foundNumber.innerHTML} | Not Found: ${notFoundNumber.innerHTML} | Archive: ${archiveNumber.innerHTML} | Total: ${totalOfAllNumbers.innerHTML}`;
  saveInfo.classList.add("li");

  const deleteBtn = document.createElement("button");
  deleteBtn.appendChild(document.createTextNode("X"));
  deleteBtn.classList.add("btn");
  deleteBtn.classList.add("li");
  deleteBtn.classList.add("delete-btn");
  saveInfo.appendChild(deleteBtn);
  savedEntries.push(saveInfo);
  console.log(savedEntries);

  savedEntries.forEach((entry, index) => {
    ul.appendChild(entry);
    localStorage.setItem(index, entry);

    deleteBtn.onclick = () => {
      deleteBtn.parentElement.style.display = "none";
      savedEntries.splice(index, 1);
      localStorage.removeItem(index);
      console.log(savedEntries);
    };
  });
});

这是我试图抓住它们的地方：

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

    for (let i = 0; i < localStorage.length; i++) {
      let item = document.createElement("li");
      item.innerHTML = localStorage.getItem(localStorage.key(i));
      ul.appendChild(item);
    }
  } else {
    ulDiv.style.display = "none";
  }
});

Answer 1

在 JavaScript 中，

localStorage

对象只能以字符串的形式存储数据。 如果您希望存储任何其他数据类型，例如对象、布尔值或数字，它们将被转换为字符串。这就是为什么您的列表对象被转换为

[object HTMLLIElement]

为了达到你想要的：

1. 需要通过

   outerHTML

   获取元素的代码，并以

   string

   的形式存储在localStorage中。
2. 然后使用

   insertAdjacentHTML()

   将该字符串附加到您的文档中。

例如：

// getting the code of your li element
const liCode = document.getElementById("myLi").outerHTML;

// setting the value in the localStorage by converting it to string
localStorage.setItem("myKey", liCode.toString());

// getting the value from localStorage 
let li = localStorage.getItem(localStorage.key(i));

// then appending it to your ul element
let ul = document.getElementById("myUL");
ul.insertAdjacentHTML("afterend", li);

请注意：

Element接口的insertAdjacentHTML()方法解析 指定文本为 HTML 或 XML，并将结果节点插入到 指定位置的DOM树

...

使用 insertAdjacentHTML() 将 HTML 插入页面时，注意不要使用未转义的用户输入。插入纯文本时不应使用 insertAdjacentHTML()。

相反，请使用

Node.textContent

属性或

Element.insertAdjacentText()

方法。这不会将传递的内容解释为 HTML，而是将其作为原始文本插入。

来源：MDN 文档