JavaScript：localStorage 中的数组有问题（使用 JSON 解析）

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]) 上控制台记录原始数组时看到的内容。相反，我看到它正在转换为一些键值对而不是原始数组。

如何return第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));

JavaScript：localStorage 中的数组有问题（使用 JSON 解析）

JavaScript: Trouble with Arrays in localStorage (using JSON Parse)

javascript

json

local-storage