Storing a javascript object in HTML5 local storage

Question

I want to store a JavaScript object in HTML5 local storage.

sessionStorage.setItem("localObj",this);

I am using the above statement within a function.The object contains HTML tags. I can neither convert it to a string nor to a JSON. How do i proceed with this?

> `I can neither convert it to a string nor to a JSON`. Why? you can convert an `HTMLElement` (with it's children) to a string and convert it back when needed. — fardjad, Aug 27 '13 at 07:16
you are getting error 'Converting circular structure to JSON' because when you are making json structure of your dom element then it create circular dependancies. like you have a property inside your dom called 'parentNode', 'parentElement','offsetParent' etc which have your dom element as their child. So it create circular dependancy and json cant be serialize because of that only. — Sudarshan Tanwar, Aug 27 '13 at 11:05

score 8 · Accepted Answer · edited Aug 27 '13 at 11:23

You have to first convert the object into json and then store in local storage. And when you want to reuse the stored data you have to deserialize the json string into javascript object and it will work fine.

Working Sample

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

score 1 · Answer 2 · answered Aug 27 '13 at 07:16

1

Local storage will only store strings. If you can't make a string representation of your object, then you can't store it.

answered Aug 27 '13 at 07:16

alex

479,566
201
878
984

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

Local storage is designed with string / value pairs in mind, so you'll have a hard time trying to store your object 'as is'. You either need to 'stringify' it, or you need to look at something else. The answers to this earlier question should assist:

Storing Objects in HTML5 localStorage

edited May 23 '17 at 12:00

Community

1
1

answered Aug 27 '13 at 07:18

Ben

7,548
31
45

The javascript object contains HTML and is like below If i use JSON.stringfy(obj) i get error : Converting circular structure to JSON – Dheeraj R Aug 27 '13 at 09:46
Understood. One approach would be to implement your own `toJSON()` function within the Javascript object. This could then handle the HTML entities therein as required. As soon as `stringify` encounters your object, it will defer to your object's implementation of `toJSON()`. – Ben Aug 27 '13 at 11:00
you are getting error 'Converting circular structure to JSON' because when you are making json structure of your dom element then it create circular dependancies. like you have a property inside your dom called 'parentNode', 'parentElement','offsetParent' etc which have your dom element as their child. So it create circular dependancy and json cant be serialize because of that only. – Sudarshan Tanwar Aug 27 '13 at 11:05

Storing a javascript object in HTML5 local storage

3 Answers3