Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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;">
        GeeksforGeeks
    </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>


Output:



Last Updated : 22 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads