Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are the different types of storage in HTML5 ?

  • Difficulty Level : Expert
  • Last Updated : 15 Aug, 2021

In this article, you will get to know about different types of Web storage in HTML5. The web storage is more secure and large amounts of data can be stored locally on the client-side web browser. All the data is stored in key-value pairs. 

In HTML5 there are two types of web storage API.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  1. localStorage
  2. SessionStorage

localStorage: It is used to store data on the client-side. It has no expiration time, so the data in the LocalStorage exists always till the user manually deletes it.

Syntax:



  • For storing data in web storage: The key and value both should be string or number;
    LocalStorage.setItem("key", "value"); 
  • For getting data from web storage: We will pass the key and it will return value.
    LocalStorage.getItem("key"); 

 

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: green;
        text-align: center;
        font-size: 30px;
        margin-top: 30px;
        font-style: italic;
      }
      #data {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <input id="name" type="name" placeholder="enter your name" />
    <button type="submit" onClick="handleClick()">click</button>
    <br />
    <div id="data"></div>
  
    <script>
      function handleClick() {
        if (typeof Storage !== "undefined") {
          let name = document.getElementById("name").value;
          localStorage.setItem("name", name);
  
          document.getElementById("data").innerHTML =
            "Welcome To GeeksforGeeks" + " " + localStorage.name;
        } else {
          alert("Sorry! your browser doesn't support Web Storage");
        }
      }
    </script>
  </body>
</html>
   

Output:

Stored data on Local Storage :

We can clearly see that local storage items are stored in the form of key/value pair and you can check by inspecting elements on the web page and then go to the Application option where you will find the local storage. 

As the localStorage object stores the data with no expiration date, you can cross-check this by closing the current tab and visit the same page again, you will find the same data is present in localStorage of that tab or window.



 

Session Storage: It is used to store data on the client-side. Data in the SessionStorage exist till the current tab is open, if we close the current tab then our data will also erase automatically from the SessionStorage.

Syntax:

  • For storing data in web storage:
    SessionStorage.setItem("key", "value");
  • For getting data from web storage:
    SessionStorage.getItem("key");

Example :

HTML




<!DOCTYPE html>  
<html>  
<head
  <style>  
      body {  
        color: green;  
        text-align: center;  
        font-size: 30px;  
        margin-top: 30px;  
        font-style: italic;  
      }  
      #data {
        text-align: center;
      }
  </style>  
</head>  
<body>  
    <input id="name" type="name" placeholder="enter your name" >
    <button type="submit" onClick="handleClick()">click</button>
    <br>
    <div id="data"></div>
  
    <script>  
      function handleClick() {
        if(typeof(Storage)!=="undefined") {  
          let name = document.getElementById("name").value;
            sessionStorage.setItem("name", name);
  
            document.getElementById("data").innerHTML = 
              ("Welcome To GeeksforGeeks"+" "+sessionStorage.name);  
          }  
          else{  
            alert("Sorry! your browser is not supporting the browser")  
          }  
       }
    </script
</body>  
</html>

Output:

Stored data on Session Storage :

As the sessionStorage object stores the data with the expiration date, you can cross-check this by closing the current tab and visit the same page again, you will find that data is empty in sessionStorage of that tab or window.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!