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