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:
