Explain Storage Object in HTML

Last Updated : 01 Feb, 2022

The HTML Storage Object is mainly used to locally store the data on the client-side web browser. It is a secure and easy way to store data of huge amounts on the web browser. It uses key-value pairs to store data on the web browser.

The HTML Storage Object can store data on the web browser in two ways:

localStorage
sessionStorage

The Local Storage Object: The local storage object stores data using localStorage Object. The data stored on the web browser using localStorage will remain in the browser storage even if you close or open the browser again. The data will not expire automatically. localStorage object uses localStorage.getItem() to get the stored data and localStorage.setItem() to add data on the browser.

Syntax:

The syntax for getting the already stored data from the browser using localStorage.getItem(): It requires a string parameter as the key to return the value corresponding to that particular key.
```
 localStorage.getItem("key");
```
The syntax for storing data on web browser using localStorage.setItem(): It takes two parameters considering one as key and the other one as value to store data.
```
localStorage.setItem("key", "value");
```

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
</head> 
  
<body> 
    <div style="display: flex;  
                flex-direction: column;  
                align-items: center;  
                justify-content: center;"> 
  
        <h2>Welcome To GFG</h2> 
  
        <input type="text" id="inputName" 
            placeholder="Enter Your Name"> 
        <br> 
        <input type="text" id="inputCountry" 
            placeholder="Your Country"> 
        <br> 
  
        <button onClick="addData()"> 
            Add Data 
        </button> 
          
        <p id="para"></p> 
    </div> 
  
    <script> 
        function addData() { 
            if (typeof (Storage) !== "undefined") { 
  
                var name = document.getElementById( 
                        "inputName").value; 
                  
                var country = document.getElementById( 
                        "inputCountry").value; 
                          
                localStorage.setItem("Name", name); 
  
                localStorage.setItem("Country", country); 
  
                var para = document.getElementById( 
                    "para").innerHTML = "Hey "  
                    + localStorage.getItem("Name") + "!" +  
                    "<br>" + "Welcome To India, You are from " 
                    + localStorage.getItem("Country") + "."; 
            } 
            else { 
                var para = document.getElementById( 
                    "para").innerHTML ="Error! You browser " 
                    + "doesn't support HTML storage object"; 
            } 
        } 
    </script> 
</body> 
  
</html> 

Output:

Here’s the stored data into localStorage of web Browse:

The Session Storage Object: The Session Storage uses sessionStorage Object to store data on the web browser. The data stored using this object lasts only for a session i.e. If we close the browser the data stored will also be deleted automatically at the same time. It also uses the same syntax as that of localStorage to store data.

Syntax:

The syntax for adding data:
```
sessionStorage.setItem("key", "value");
```
The syntax for fetching data:
```
sessionStorage.getItem("key");
```

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
</head> 
  
<body> 
    <div style="display: flex;  
                flex-direction: column;  
                align-items: center;  
                justify-content: center;"> 
  
        <h2>Welcome To GFG</h2> 
  
        <input type="text" id="inputName" 
            placeholder="Enter Your Name"> 
        <br> 
        <input type="text" id="inputCountry" 
            placeholder="Your Country"> 
        <br> 
  
        <button onClick="addData()"> 
            Add Data 
        </button> 
          
        <p id="para"></p> 
    </div> 
  
    <script> 
        function addData() { 
            if (typeof (Storage) !== "undefined") { 
  
                var name = document.getElementById( 
                        "inputName").value; 
  
                var country = document.getElementById( 
                        "inputCountry").value; 
  
                sessionStorage.setItem("Name", name); 
  
                sessionStorage.setItem("Country", country); 
  
                var para = document.getElementById( 
                    "para").innerHTML = "Hey "  
                    + sessionStorage.getItem("Name") 
                    + "!" + "<br>" +  
                    "Welcome To GeeksforGeeks! You belongs to " 
                    + sessionStorage.getItem("Country") + "."; 
            } 
            else { 
                var para = document.getElementById( 
                    "para").innerHTML = "Error! You browser " 
                    + "doesn't support HTML storage object"; 
            } 
        } 
    </script> 
</body> 
  
</html> 