Skip to content
Related Articles
Open in App
Not now

Related Articles

What are the different types of storage in HTML5 ?

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 15 Aug, 2021
Improve Article
Save Article

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.

  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
Related Articles

Start Your Coding Journey Now!