如何将JavaScript HTML DOM文档存储到本地存储中？

Question

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

以下是我尝试过的代码

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

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

我正在使用primefaces 4.0，jsf 2.1。

当我使用 localStorage.setItem("calendarevents",JSON.stringify(k));

我会得到一个错误“converting circular structure to json”。

- Eves

---

localstorage 存储字符串。如果想要存储任何内容，都必须将其转换为字符串表示形式。 - James Montagne

Answer 1

您需要通过以下方式存储文档的HTML字符串表示：

链接

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

当你这样做时：

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

它将document.documentElement.toString()的结果存储在localStorage中，这对您的目的无效。

- David Sherret

---

但是我想将整个文档存储到本地存储中，因为我想在代码中稍后检索它以进行进一步的操作。如果我只存储文档元素，我将无法从中获取子节点。 - Eves

@mydoubts 你只能在本地存储中存储字符串。你可以使用本地存储中的字符串加载回HTML。从那里，你可以对该对象进行一些操作。 - David Sherret

@mydoubts 也许你可以更详细地解释一下你的情况。页面是重新加载还是在设置和获取本地存储值之间转到另一页？ - David Sherret

@mydoubts 等一下...所以这全部都是在同一个HTML页面上完成的，但是在不同的JS文件中？ - David Sherret

让我们在聊天中继续这个讨论。 - Eves

Answer 2

localStorage 将任何值都转换为字符串。如果要存储对象，需要使用一个变通方法。

我猜你可以使用这个答案中描述的方法

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));

- Mathieu David