如何将javascript html dom文档存储到本地存储答案

【问题标题】：how to store javascript html dom document to locastorage如何将javascript html dom文档存储到本地存储
【发布时间】：2014-10-21 08:28:22
【问题描述】：

我有文档（组件树）'m'，我试图将其存储在 html5 的本地存储中。我尝试将其设置为本地存储。但是当我取回它时，这个 m 已更改为 [object Document]。如何将文档存储到本地存储并将其作为文档本身检索？

下面是我尝试过的代码

应用程序向服务器发送一个 ajax 请求以检索日历的事件，并在请求成功时收到 xhtml 的 dom 表示。当用户进入下周视图时，应用程序必须从本地存储中检索事件。要将js文件的响应发送给客户端，也需要dom表示。所以我们需要将dom表示存储到localstorage中。

我的要求是在第一张图片的控制台中，您可以看到从文档 m 中检索到“k”并作为响应发送给客户端。所以，我想要将此 k 或 m 存储到本地存储中，所以我可以在同一个js文件中操作它。这段代码在一个单独的js文件中，用于xhtml文件。

我正在使用 primefaces 4.0、jsf 2.1。

当我使用时

localStorage.setItem("日历事件",JSON.stringify(k));

我收到一个错误“将循环结构转换为 json”。

【问题讨论】：

localstorage 存储字符串。您想要存储的任何内容都必须转换为字符串表示形式。

标签： javascript html

【解决方案1】：

您需要存储document's html 的字符串表示形式：

localStorage.setItem('calendar', document.documentElement.innerHTML);

当你这样做时：

localStorage.setItem('calendar', document.documentElement);

...它将document.documentElement.toString() 的结果存储在localStorage 中，这不适合您的目的。

【讨论】：

但我想将整个文档存储到本地存储中，因为我想稍后在代码中检索它以进行进一步操作。如果我只存储文档元素，我将无法从中获取子节点
@mydoubts 您只能将字符串存储在本地存储中。您可以load back the html 在本地存储中使用该字符串。从那里您可以对该对象进行一些操作。
@mydoubts 也许你可以多解释一下你的场景。在设置和从本地存储中获取值之间是页面重新加载还是要转到不同的页面？
我的要求在第一张图片的控制台中，您可以看到从文档 m 中检索到“k”并作为响应发送给客户端。所以，我想要存储这个 k 或 m到本地存储，所以我可以在同一个 js 文件中操作它。这段代码在一个单独的 js 文件中，用于 xhtml 文件。
@mydoubts 等等...所以这都是在同一个 html 页面上完成的，但是在不同的 js 文件中？

【解决方案2】：

localStorage 将每个值转换为字符串。要存储对象，您必须使用解决方法。

我猜你可以使用in this answer描述的方法

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

【讨论】：