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:
<!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: