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

22 Jan, 2021
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:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS