Explain Storage Object in HTML


As the web storage word represents, it stores the data inside the user’s browser locally. Before HTML 5, developers were using cookies to store data locally, but the cookies allow for storing a limited amount of data, such as in kilobytes. The local storage allows users to store up to 5 MB of data.

Developers use the cookies to store the data in the browser and exchange it between the client and server. When we store the data in the cookies, it expires after a particular time. However, we can set the data's expiry, but it still expires after a long time. Any data stored in the web storage using the storage object never expires, which can be one reason to introduce the storage object in HTML 5.

Also, HTML 5 web storage provides more data security than cookies. While transferring the data between the server, hackers can attack the data and can steal the data from cookies, but web storage never allows to transfer of the data. So, it is more secure than cookies.

So, we have learned how storage objects are useful in HTML 5. Now, we will learn about the two different types of storage objects in HTML.

There are two types of Storage objects −

  • Local Storage

  • and Session Storage.

Local Storage stores data indefinitely, while Session Storage stores data for the duration of the current session.

Data stored in Local Storage can be accessed by any window or tab in the same origin, while data stored in Session Storage is only accessible in the window or tab that created it. HTML5 Storage objects provide more data security than cookies, as they do not transfer data between the client and server.

Local Storage in HTML 5

The localstorage stores the data in the browser without the expiry date, which means whatever data we store inside the localstorage never expires.

The localstorage is a static object. So, we can access it by taking the window object as a reference or directly using the localStorage keyword. As localstorage is an object, it stores the data in key-value pair.

Syntax

Users can follow the syntax below to store and get data from the local storage.

// to get data from localstorage using the key
localStorage.getItem("key");

// to set data in the localstorage
localStorage.setItem("key", value);

In the above syntax, we have used the getItem() and setItem() methods to get and set data to localstorage.

Parameters

  • Key − It is a unique key to store data in the web storage.

  • Value − It is a value related to a unique key to store the data in web storage.

Example

In this example, we have used the setItem() method of the localStorage object to store the different values for the key1 and key2 in the web browser. After that, we access the values using the getItem() method by passing the key as a parameter.

<html>
<body>
   <h2>Using the <i> localStorage </i> Object</h2>
   <div id = "output"> </div>
   <script>      
      // setting up multiple values for a single key
      localStorage.setItem("key1", "JavaScript!");
      localStorage.setItem("key2", "TypeScript!");
      document.getElementById("output").innerHTML += "The value stored for key1 in localstorage is " + localStorage.getItem("key1") + "<br/>";
      document.getElementById("output").innerHTML += "The value stored for key2 in localstorage is " + localStorage.getItem("key2") + "<br/>";
   </script>
</body>
</html>

Example

In the example below, we set two values for the same key. In the output, users can observe that web storage can contain unique keys, and if we set the new value for the already existing key, it replaces the value.

When a user clicks on the “get data from local storage” button, it shows the value from the localstorage for a “website” key, which is set up at last.

<html>
<body>
   <h2>Using the <i> localStorage </i> object</h2>
   <button onclick = "getData()"> Get data from local storage </button><br><br>
   <div id = "output"> </div>
   <script>      
      // setting up multiple values for a single key
      localStorage.setItem("website", "website Name");
      localStorage.setItem("website", "TutorialsPoint!");
      
      // function to get data.
      function getData() {
         
         // using the getItem() method of the local storage object to get the data.
         document.getElementById("output").innerHTML +="The data from the localstorage is " + localStorage.getItem("website");
      }
   </script>
</body>
</html>

Session Storage in HTML 5

The session storage is very similar to the local storage but stores the data for a particular session. If the session terminates, the data from the session storage get cleared automatically but never deleted from the local storage.

Also, to store data in the session storage, we can use the setItem() method by taking the sessionStorage as a reference, just like the localStorage, and getItem() to get the data from the session storage.

Syntax

Users can follow the syntax below to store and get data from the session storage.

// to get data from sessionStorage using the key
sessionStorage.getItem("key");

// to set data in the sessionStorage
sessionStorage.setItem("key", value);

Example

The below example is almost the same as the above one. We are using the session storage to store the data instead of localStorage. When session time outs, the browser deletes all data from the session storage.

<html>
<body>
   <h2>Using the <i> sessionStorage </i> Object</h2>
   <div id = "output"> </div>
   <script>      
      // using the sessionStorage object to store the id for a particular session
      sessionStorage.setItem("id", "ShubhamVora564");
      
      // fetching the id from the session storage.
      document.getElementById("output").innerHTML +=  "My id fetched from the session storage is " + sessionStorage.getItem("id") +  "<br/>";
   </script>
</body>
</html>

Methods of the localStorage and sessionStorage object

The localStorage and sessionStorage objects also contain other methods like getItem() and setItem() to perform various operations. We have explained the methods below.

  • clear() – It is used to clear the web storage.

  • key(ind) – It takes the zero-based index as a parameter and returns the key from the ind index.

  • length – It returns the total number of key-value pairs stored in the web storage.

  • removeItem(key) – It takes a key as a parameter and removes that key-value pair from the web storage.

Conclusion

The HTML Storage object is a way to store data locally in a user's browser. There are two types of Storage objects: Local Storage and Session Storage. Local Storage stores data indefinitely, while Session Storage stores data for the duration of the current session. HTML5 Storage objects provide more data security than cookies, as they do not transfer data between the client and server.

Updated on: 05-Jan-2023

237 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements