将 DOM 元素保存到 localStorage

Question

我正在尝试将一个包含 HTML 元素的变量保存到 localStorage 中，这样我可以随时（从 localStorage）再次调用该变量。

我正在chrome扩展的后台和内容脚本中执行javascript

所以我创建了变量并使用要保存的 HTML 元素加载它：

var btnelm = document.getElementById("ELM_ID");

然后我尝试将该变量保存到 localStorage（希望以后能够使用该变量）

localStorage["btnelm"] = btnelm;

但是当我调用 localStorage 时，我需要它在我的变量中包含 html 元素

localStorage["btnelm"]

我得到了这个字符串文本（而不是我的 btnelm 变量中的实际 html 元素：

[object HTMLInputElement]

这当然意味着，当我将 localStorage["btnelm"] 视为包含我的 html 元素的变量时，它不起作用：

localStorage["btnelm"].innerHTML 返回undefined

我知道 localStorage 只存储 string 值，所以我有什么选择可以存储我的 btnelm 并且当被调用时，能够像我第一次创建时一样对待它（例如，使用 .childern 访问它）

提前致谢

Answer 1

你不能保存 DOM 元素本身...但是你可以保存它的outerHTML。

<div id="ELM_ID">My Div</div>

var btnelm = document.getElementById("ELM_ID").outerHTML;  // <== here

localStorage["btnelm"] = btnelm;
console.log(localStorage["btnelm"]);

输出是：

"<div id='ELM_ID'>My Div</div>"

---

编辑

要使用检索到的外层HTML...并按原样查找其属性是一个真正的DOM元素，只需使用.createElement()方法“重新创建”它...

let tempElement = document.createElement("div")
tempElement.innerHTML = localStorage["btnelm"]
console.log(tempElement.children[0].innerText) // Will output "My Div"