How to store objects in HTML5 localStorage?

In this tutorial, we will discuss how to store objects in HTML5 localStorage. We can access the Storage object and store data in it thanks to the interface window's localStorage property.

There is no time limit on it. As a result, the data that is stored in it will remain until it is explicitly deleted. The localStorage data can't be removed by closing the browser.

To store JavaScript objects in localStorage, we will investigate how to stringify and parse them into JSON strings and then how to store them in localStorage.

Using the setItem() Method

This setItem() method is used to store data in HTML5 localStorage. This method comes under the localStorage property of the window interface.


window.localStorage.setItem(key, value);

Here, we have used two parameters in the method setItem(key, value). A key and Value. Let’s understand the parameters in detail.


key − This is a distinct identifier of a value. It is possible later to obtain a value from localStorage using this distinct identifier.

value − This is the data/information that will be kept in localStorage.

Example 1

In this example, First, we are creating an object that we will store in localStorage named objectRegion. Afterward, we define two variables: a key and a value. Variable value contains the JSON format of the object. Then using setItem() we are setting this key and value pair to localStorage. Here we have also used the getItem() method, which will find value from the key provided. It returns the value corresponding to the key. Then we display it.

   <h2> Add an Object to localStorage in HTML5 using setItem() method </h2>
   <label> Object: </label>
   <div id="get-object"> </div>
      // Creating object
      // this object will be saved to localhost
      const objectRegion = {
         Region: "Asia",
         Country: "India"
      // defining key and value
      const key = "object";
      const value = JSON.stringify(objectRegion)
      // setting the key-value pair to localhost
      window.localStorage.setItem(key, value);
      // Getting the key-value pair using the getItem() method with the key attribute
      // getItem() method is used to get the value from localStorage using key
      let object = window.localStorage.getItem(key);
      // Displaying the object.
      let element = document.getElementById("get-object");
      element.innerHTML = object;

Example 2

Here in this example, we can store an object in localStorage and retrieve it. We have the first two input text boxes through which we can store value to localStorage. And using the key, we can retrieve the value. If the key is not in localStorage, getItem () returns a null value.

   <h2> Set the value to localStorage using setItem() method in an HTML5 </h2>
   <p> Set the key-value pair to localStorage </p>
   <label> Key: </label>
   <input type="text" id="set-key">
   <br> <br>
   <label> Value: </label>
   <input type="text" id="set-value">
   <br> <br>
   <input type="button" value="Set Key-Value" onclick="setKeyValue()">
   <div id="set"> </div>
   <p> Get the value from key </p>
   <label> Enter Key: </label>
   <input type="text" id="get-key">
   <br> <br>
   <div id="get-value"> </div>
   <input type="button" value="Get Value" onclick="getValueFromKey()">
   <div id="get"> </div>
      // this function will Set Key-value pair to localStorage
      function setKeyValue() {
         // Getting the key-value pair from the input box
         let key = document.getElementById("set-key").value;
         let value = document.getElementById("set-value").value;
         // Setting the key-value pair to localStorage
         window.localStorage.setItem(key, JSON.stringify(value));
         let text = "";
         text += "<br>Key-Value set.<br> Try with key: ";
         text += key;
         text += " to get the value";
         // Displaying the message
         let element = document.getElementById("set");
         element.innerHTML = text;
      // This function will get value using the key from localStorage
      function getValueFromKey() {
         let key = document.getElementById("get-key").value;
         // Getting the object value from localStorage with key using getItem() method
         let value = window.localStorage.getItem(key);
         let element = document.getElementById("get");
         if (value != null) {
            element.innerHTML = "<br> Value corresponding to key: " + key + " is: " + value;
         } else {
            element.innerHTML = "<br> Key is not in localStorage, try to set key-value pair first!";

In this tutorial, We have seen how to store objects in HTML5 in localStorage using the setItem() method.

Updated on: 06-Dec-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started