how to store javascript html dom document to locastorage

Question

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

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'.

Answer 1

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.