存储DOM元素数组到localStorage后无法复用，如何修复？

核心原因 #

localStorage 只能存储可被 JSON 序列化的数据，DOM 元素是复杂的浏览器内置对象，无法被 JSON 正确序列化和反序列化：

• 当你调用 JSON.stringify() 处理 DOM 元素时，JSON 只会尝试序列化对象的可枚举属性，但 DOM 节点包含大量内部引用、方法和浏览器私有属性，这些内容无法被转化为 JSON 字符串，最终得到的只是一个空对象或仅包含少量无用属性的普通对象。
• 当你用 JSON.parse() 读取 localStorage 中的数据时，得到的是一个普通 JavaScript 对象，而非原来的 DOM 节点，自然不具备 DOM 节点的特性，调用 appendChild() 时就会触发“not of type Node”错误。

代码问题分析 #

在你的 other.js 代码中：

1. 第一次向 temp 数组中推入的是真实的 DOM 节点，但执行 JSON.stringify(temp) 存储到 localStorage 时，这个 DOM 节点已经被转成了无效的普通对象。
2. 后续从 localStorage 读取并解析后，temp[0] 不再是 DOM Node 类型，所以 storeHere.appendChild(temp[0]) 会报错。

解决方案 #

不要直接存储 DOM 元素，而是存储 DOM 元素的可序列化信息（比如 HTML 字符串、文本内容、关键属性），读取后再根据这些信息重新创建 DOM 元素。

修改后的示例代码：

// other.js
method() {
   // 读取时默认空数组，避免localStorage无数据的情况
   let temp = JSON.parse(localStorage.getItem("arr")) || [];
   // 存储目标元素的HTML字符串
   temp.push(document.querySelector(".stuff").outerHTML);
   localStorage.setItem("arr", JSON.stringify(temp));

   const storeHere = document.querySelector(".storeHere");
   // 从HTML字符串重新构建DOM元素
   const tempElement = document.createElement('div');
   tempElement.innerHTML = temp[0];
   // 将构建好的元素追加到目标容器
   storeHere.appendChild(tempElement.firstElementChild);
}

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