How to clear session storage data with specified session storage item ?

0 0 1 minute read

In this article, we are going to learn how we can clear the session storage of a browser using JavaScript by getting the specified session storage item.

We can achieve this by using Window sessionStorage( ) property. The Window sessionStorage() property is used for saving key/value pairs in a web browser. It stores the key/value pairs in a browser for only one session and the data expires as soon as a new session is loaded.

Syntax:

window.sessionStorage

We can get specified session storage using the getItem() method.

sessionStorage.getItem('GFG_Item')

We can clear the session storage by using the clear() method.

sessionStorage.clear()

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        zambiatek 
    </h1> 
      
    <h4> 
        How to clear session storage data  
        with getting the specified session  
        storage item? 
    </h4> 
  
    <input type="text" id="text"> 
      
    <button onclick="display()"> 
        Display my item 
    </button> 
      
    <p id="display"></p> 
  
  
    <button onclick="isEmpty()"> 
        Checking if Empty 
    </button> 
      
    <p id="isEmpty"></p> 
  
    <script> 
  
        // Setting items in the local storage 
        sessionStorage.setItem('item1', 'Kotlin'); 
        sessionStorage.setItem('item2', 'Flutter'); 
        sessionStorage.setItem('item3', 'React'); 
  
        function display() { 
  
            // Getting the text value of input field 
            let item = document.getElementById('text').value; 
  
            // Getting particular item from the 
            // session storage 
            let displayItem = sessionStorage.getItem(item); 
  
            // Checking if key exists or not in  
            // the session storage  
            if (displayItem == null) // If key doesn't exist 
            { 
                document.getElementById('display') 
                    .innerText = 'Key does not exist'; 
            } else { 
  
                // If it exists 
                document.getElementById('display') 
                    .innerText = displayItem; 
  
                // Clearing the session storage 
                sessionStorage.clear(); 
            } 
  
        } 
  
        // Checking if session storage is empty 
        function isEmpty() { 
  
            // If session storage is empty 
            if (sessionStorage.length == 0) 
                document.getElementById('isEmpty') 
                    .innerText = 'It is empty'; 
            else 
                document.getElementById('isEmpty') 
                    .innerText = 'It is not empty'; 
        } 
    </script> 
</body> 
  
</html> 