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

mehere
  • 1,487
  • 5
  • 28
  • 50

2 Answers2

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.

Community
  • 1
  • 1
David Sherret
  • 101,669
  • 28
  • 188
  • 178
  • 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 – mehere Aug 27 '14 at 16:51
  • @mydoubts you can only store strings in local storage. You can [load back the html](http://stackoverflow.com/a/494348/188246) using that string in local storage. From there you can do some manipulations on that object. – David Sherret Aug 27 '14 at 17:51
  • @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? – David Sherret Aug 27 '14 at 17:53
  • 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. – mehere Aug 28 '14 at 03:29
  • @mydoubts wait... so this is all done on the same html page, but in different js files? – David Sherret Aug 28 '14 at 03:53
  • @mydoubts you don't need to use local storage for that. Variables in one js file are accessible in another js files (as long as they are not defined within a function's scope). For example, doing `window.myVariable = "Hello";` in one file then doing `alert(window.myVariable);` in another will cause an alert that says `Hello`. – David Sherret Aug 28 '14 at 04:01
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60136/discussion-between-mydoubts-and-david-sherret). – mehere Aug 28 '14 at 05:16
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));
Community
  • 1
  • 1
Mathieu David
  • 4,706
  • 3
  • 18
  • 28