WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Store JavaScript Objects in HTML5 localStorage

Topic: JavaScript / jQueryPrev|Next

Answer: Use the JSON.stringify() Method

By default, the localStorage or sessionStorage only allows you to store string key/value pairs. But you can also store the JavaScript objects in web storage with a little trick.

To store objects first stringify it using the JSON.stringify() method, and later parse it with the JSON.parse() when you need retrieve it, as shown in the following example:

  • <script>
  • var personObject = { name: "Peter", age: 18, married: false };
  •  
  • // Convert the person object into JSON string and save it into storage
  • localStorage.setItem("personObject", JSON.stringify(personObject));
  •  
  • // Retrieve the JSON string
  • var jsonString = localStorage.getItem("personObject");
  •  
  • // Parse the JSON string back to JS object
  • var retrievedObject = JSON.parse(jsonString);
  • console.log(retrievedObject);
  •  
  • // Accessing individual values
  • console.log(retrievedObject.name); // Prints: Peter
  • console.log(retrievedObject.age); // Prints: 18
  • console.log(retrievedObject.married); // Prints: false
  • </script>

See the tutorial on HTML5 web storage to learn more about local and session storage.


Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.