4

I have document (component tree) 'm' which i am trying to store in the local storage of html5. I tried setting it to local storage. but when i retrieve it back, this m has changed to [object Document]. How do i store document to local storage and retrieve it as document itself?

Below is the code i have tried

Before storing to local storage

After retrieving it back from the local storage

the application sends a ajax request to server to retireve events of a calendar and in the request's onsuccess the dom representation of xhtml is recieved. when the user goes to next week view, the app has to retieve the event from the localstorage. to send the response to the client from the js file, the dom representation is also necessary.so we need to store the dom representation to the localstorage.

my requirements is in 1st picture's console, you can see 'k' is retrieved from the document m and is send as response to the client side.So, what I want is to store this k or m to local storage so i can manipulate it in the same js file.this code is in a separate js file which is used in the xhtml file.

I am using primefaces 4.0, jsf 2.1.

when i use

localStorage.setItem("calendarevents",JSON.stringify(k));

I get an error 'converting circular structure to json'.

Improve this question
1
  • 3
    localstorage stores strings. Anything you would like to store must be converted to a string representation. Commented Aug 27, 2014 at 16:34

2 Answers 2

Reset to default
8

You need to store a string representation of the document's html by doing:

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

When you do this:

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

...it stores the result of document.documentElement.toString() in localStorage, which doesn't work for your purpose.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

but i want to store the entire document to local storage as i want to retireve that later in the code for further manipulation.if i store document element only, i wont be able to get the childnodes from it
@mydoubts you can only store strings in local storage. You can load back the html using that string in local storage. From there you can do some manipulations on that object.
@mydoubts maybe you could explain your scenario a bit more. Is the page reloading or are you going to a different page inbetween setting and getting the value from local storage?
my requirements is in 1st picture's console, you can see 'k' is retrieved from the document m and is send as response to the client side.So, what I want is to store this k or m to local storage so i can manipulate it in the same js file..this code is in a separate js file which is used in the xhtml file.
@mydoubts wait... so this is all done on the same html page, but in different js files?
|
3

localStorage converts every value to a string. To store objects you have to use a workaround.

I guess you could use the method described 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));
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.