在HTML5本地存储中存储JavaScript对象

Question

我想将一个 JavaScript 对象存储在 HTML5 本地存储中。

sessionStorage.setItem("localObj",this);

我在函数中使用了上述语句，该对象包含HTML标记。 我既不能将其转换为字符串，也不能转换为JSON。 我该如何处理？

- Dheeraj R

---

我既不能将它转换为字符串，也不能转换为JSON。为什么呢？你可以将一个HTMLElement（及其子元素）转换为字符串，并在需要时再进行转换。 - fardjad

你会收到错误信息“将循环结构转换为JSON”，因为当你将DOM元素的JSON结构创建时，它会创建循环依赖。例如，你的DOM中有一个名为“parentNode”、“parentElement”、“offsetParent”等的属性，它们将你的DOM元素作为其子元素。因此，它会创建循环依赖，而JSON无法序列化。 - Sudarshan Tanwar

Answer 1

你需要先将对象转换为JSON格式，然后再存储到本地存储中。当你想要重用已存储的数据时，你需要将JSON字符串反序列化为JavaScript对象，这样它就可以正常工作了。 工作示例

function setValue() {
    var obj = new user();
    var jsonObject = JSON.stringify(obj);
    sessionStorage.setItem("Gupta", jsonObject);
    getValue();
}

function user() {
    this.Name = "rahul";
    this.Age = 20;       
}

function getValue() {
    var json_string = sessionStorage.getItem("Gupta");
    var obj = JSON.parse(json_string)
    alert("Name = "+obj.Name + ", Age = " + obj.Age);
}

- Sudarshan Tanwar

Answer 2

本地存储只能存储字符串。如果您无法创建对象的字符串表示，则无法存储它。

- alex

Answer 3

本地存储是以字符串/值对为设计目标的，因此您将很难尝试将对象“原样”存储。您需要将其“字符串化”，或者您需要查看其他内容。这个早期问题的答案应该会有所帮助：

在HTML5本地存储中存储对象

- Ben

---

JavaScript对象包含HTML，如下所示： <a title="" class="" style="" active=""> <img src=""/> </a> 如果我使用JSON.stringify(obj)，会出现错误：将循环结构转换为JSON。 - Dheeraj R

明白了。一种方法是在Javascript对象内部实现自己的toJSON()函数。这样可以根据需要处理其中的HTML实体。一旦stringify遇到您的对象，它将转而使用您对象的toJSON()实现。 - Ben

你会收到错误信息“将循环结构转换为JSON”，因为当你将DOM元素转换为JSON结构时，它会创建循环依赖。例如，你的DOM中有一个名为“parentNode”、“parentElement”、“offsetParent”等的属性，它们将你的DOM元素作为其子元素。因此，它会创建循环依赖，导致无法序列化JSON。 - Sudarshan Tanwar