在本地存储器中存储dom元素数组是不起作用的.如何修复

Question

我正在尝试将一个包含DOM元素集的数组存储到localStorage中。当从localStorage存储/获取数组时，我无法附加存储在数组中的元素。但目前，如果我不使用localStorage，我的程序就可以工作，而且我可以完全很好地附加数组元素。这里有一个我刚刚快速写下的例子，它会导致我在使用localStorage时出错。这个错误的原因是什么？

**html**
<div class = "container">
<div class = "stuff"> Store this text </div>
</div>
<div class = "storeHere">

**index.js**
let arr = [];
if (localStorage.length == 0) localStorage.setItem("arr", JSON.stringify(arr));
else {
//psuedocode: Calling the imported method in "other.js"
}
**other.js** 
method() {
let temp = [];
temp = JSON.parse(localStorage.getItem("arr"));
temp.push(document.querySelector(".stuff");
localStorage.setItem("arr", JSON.stringify(temp));
const storeHere = document.querySelector(".storeHere");

storeHere.appendChild(temp[0]); //Error, not of type Node

}

Answer 1

只将可序列化的值放入存储中。元素不可序列化。

如果要存储Store this text，则只存储该文本。如果动态值包括嵌套元素，则在需要时构造这些嵌套元素，或者存储整个HTML字符串并设置容器的.innerHTML。

这里，.stuff的子级只是一个普通的单个字符串，所以只需将这一个字符串放入存储中即可。

// store string
localStorage.stuffText = document.querySelector('.stuff').textContent;
// retrieve string and put into DOM
if (localStorage.stuffText) {
document.querySelector('.stuff').textContent = localStorage.stuffText;
// or if you want to put it into a .storeHere element, use that selector instead
}

如果你想存储一个字符串数组，那么可能是之类的东西

const storedArr = localStorage.arr ? JSON.parse(localStorage.arr) : [];
// store string
storedArr.push(document.querySelector('.stuff').textContent);
localStorage.stuffText = JSON.stringify(storedArr);
// retrieve string and put into DOM
if (localStorage.arr) {
const storedArr = JSON.parse(localStorage.arr);
for (const item of storedArr) {
document.querySelector('.stuff').textContent = item;
}
// or if you want to put it into a .storeHere element, use that selector instead
}

Answer 2

HTML元素不可序列化，所以localStorage无法存储它。保存之前需要将它序列化为字符串。我建议将element.outerHTML与JSON.stringify一起使用。

数组示例代码：

// Serialize
const arr = []
// convert to string
const elementAsString = document.querySelector('div').outerHTML
// add to your current array
arr.push(elementAsString)
// use JSON.stringify to keep correct array format in localStorage
localStorage.setItem('arr', JSON.stringify(arr))

// Deserialize
const saveArr = JSON.parse(localStorage.getItem('arr'))
// we need create an empty element first
const e = document.createElement('div')
// append element to a parent before set outerHTML
document.body.append(e)
// set HTML for it
e.outerHTML = saveArr[0]

Answer 3

您只需要替换这两行，您的错误就会修复。

内部other.jsmethod()函数：-

function method () {
//temp.push(document.querySelector(".stuff"));
temp.push(document.querySelector(".stuff").outerHTML);
//storeHere.appendChild(temp[0])
storeHere.innerHTML += temp[0];
}

解释

1. 我们不能字符串化HTMLNode(由document.querySelector返回)，因为它不是字符串，但我们可以使用其outerHTML属性将其作为字符串获取
2. 当您在arr中按下HTMLNode并将其设置为localStorage作为字符串时，localStorage.getItem("arr")将返回"['[object HTMLNode]']">作为字符串，您将其解析为数组。它生成temp[0] = '[object HTMLNode]'，这是一个字符串(而不是HTMLNode)，这会在将其附加为子节点(您在注释中提到的)时出错

我回答有点晚，因为我在键入答案时出现了问题