JavaScript：localStorage 中的数组问题（使用 JSON Parse）

Question

JS 新手。我试图通过使用 JSON 将数组转换为字符串来将数组存储在 localStorage 中，然后当我从网站上的另一个页面检索它时将其解析回数组。但是，在解析回数组后，我在控制台日志中没有看到预期的结果。

我以前没有使用过 JSON，所以也许我做错了什么。我找不到需要在我的脚本页面上导入任何内容以使用 JSON，但如果我遗漏了什么，请告诉我。

示例代码：

第 1 页 HTML：

<div class="test">Some text.</div>
<div class="test">Some text.</div>
<div class="test">Some text.</div>

第 1 页 JS：

var allDivs = document.querySelectorAll(".test");
console.log(allDivs);
  // Console Log Output: NodeList(3) [div.test, div.test, div.test]
localStorage.setItem("content", JSON.stringify(allDivs));

第 2 页 JS：

var originalArray = JSON.parse(localStorage.getItem("content"));
console.log(originalArray);
  // Console Log Output: {0: {…}, 1: {…}, 2: {…}}

我希望在第 2 页检索后，控制台日志将带回我在第 1 页 (NodeList(3) [div.test, div.test, div.test]) 控制台记录原始阵列时看到的内容。相反，我看到它正在转换为一些键值对而不是原始数组。

如何返回第 2 页上的原始数组？我希望能够在第 2 页上设置一个循环遍历该数组的函数，而不必手动将第 1 页上的所有内容复制到第 2 页上的隐藏容器中，因为第 1 页内容每天都在变化。

如果总体上有更好的方法可以解决此问题，请告诉我！我也尝试了其他一些方法，例如 fetch(url) 和 jQuery $.load，但无法理解如何使这些选项与我的代码一起使用。

Answer 1

Nodelist 是节点的集合，这些节点是具有许多属性的对象：https://developer.mozilla.org/en-US/docs/Web/API/NodeList 你可以做的是：

const result = [];
for (const div of allDivs) {
    result.push(div.innerHTML);
    localStorage.setItem("content", JSON.stringify(result));
}

或者：

const result = Array.from(allDivs).map((div) => div.innerHTML);
localStorage.setItem("content", JSON.stringify(result));