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;">         neveropen     </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:
