JS sessionStorage 存储 HTML 节点，稍后再使用它

Question

我需要克隆一些 HTML 内容，将其存储在 sessionStorage 中，然后将存储的 HTML 重新部署回另一个页面上的 DOM。目前，我的测试只是在一个页面上完成所有操作，并通过页面刷新调用 sessionStorage。

所以，这是我到目前为止的想法。

var exp561CardFour = document.getElementById('dashboard_item_four');
var clnCardFour = exp561CardFour.cloneNode(true);
sessionStorage.setItem('storedCardFour', clnCardFour);

当我用控制台中的这段代码去获取 HTML 时...

var grabCardFour = sessionStorage.getItem('storedCardFour');

...我最终得到这个：

请帮忙:)

编辑：仅供参考 clnCardFour 只包含一些 HTML 并且工作正常

在控制台中使用 Parking Masters 建议进行编辑：

Answer 1

存储 API (sessionStorage/localStorage) 仅存储字符串。当你打电话时：

sessionStorage.setItem('storedCardFour', clnCardFour);

API 对对象 clnCardFour 使用 .toString() 方法 - returns [object HTMLLIElement].

因此您需要该节点的字符串表示形式。您可以通过像这样获取节点的 OuterHTML 来实现：

sessionStorage.setItem('storedCardFour', clnCardFour.outerHTML);

当您需要恢复该节点时，只需使用父节点的 .innerHTML 属性将其放回 DOM。

let div = document.querySelector('div');
let exp561CardFour = document.getElementById('dashboard_item_four');
sessionStorage.setItem('storedCardFour', exp561CardFour.outerHTML);
let clonedFromStorage = sessionStorage.getItem('storedCardFour');
div.innerHTML += clonedFromStorage

<div>
  <i id="dashboard_item_four">Hello there!</i>
</div>

这里是 JS Bin Example

Answer 2

HTMLIElement 是一个 <i> 元素，您正在将整个元素对象存储在存储器中。

可以使用JSON (JavaScript Object Notation) .stringify({}) 将元素字符串化，然后再次解析得到元素.

这是一个例子：

var myEl = document.getElementById("my-el");

alert("This will not print the object: " + myEl);

alert("This will print the object: " + JSON.stringify(myEl));

<i id="my-el"></i>

溢出的对象没有被字符串化，因为对象太长了。

与jQuery:

var myEl = $("my-el");

alert("This will not print the jQuery object: " + myEl);

alert("This will print the jQuery object: " + JSON.stringify(myEl));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i id="my-el"></i>

更多关于 JSON.stringify and JSON.parse 在 MDN。

（请注意您在 sessionStorage 中存储的内容，一次最多只能存储 2kB）。

现在使用JSON.parse获取解析对象：

var myObj = "{}";

myObj; // "{}"

JSON.parse(myObj); // Object { ... }

我整理了所有内容的实例：

var exp561CardFour = document.getElementById('dashboard_item_four');
var clnCardFour = exp561CardFour.cloneNode(true);
sessionStorage.setItem('storedCardFour', JSON.stringify(clnCardFour));

// When in an <iframe>, it'll say The operation is insecure."

var grabCardFour = JSON.parse(sessionStorage.getItem('storedCardFour'));

<i id="dashboard_item_four"><i>

代码片段来自 stacksnippets.net，由于 iframe 安全问题将无法运行。

但是，请在您的本地服务器/文件上尝试，祝您好运。

JS sessionStorage 存储 HTML 节点，稍后再使用它

JS sessionStorage to store HTML node and then re-use it later

javascript

clone

session-storage