How to Set, Get and Remove Session Value in Javascript?

by

In this blog post, we are going to set, get and remove the session value in javascript.

The sessionStorage object stores data only for a session. sessionStorage is quite similar to localStorage, But the difference is that localStorage doesn’t expire, and data in sessionStorage is cleared when the page session ends.

Set Session value in javascript

<!DOCTYPE html>
<html>
<body>

<h2>set session value in javascript</h2>


<button onclick="setSessionValue()">set value</button>

<script>
function setSessionValue() {
 
   	sessionStorage.setItem("key_name", "hello, Codermen");
}
</script>


</body>
</html>

Get session value in Javascript

<!DOCTYPE html>
<html>
<body>

<h2>Get session value in javascript</h2>


<button onclick="setSessionValue()">Get value</button>

<script>
function setSessionValue() {
 
   let value =	sessionStorage.getItem("key_name");
    alert(value);
}
</script>


</body>
</html>

Remove Session Value in Javascript

<!DOCTYPE html>
<html>
<body>

<h2>Remove session value in javascript</h2>


<button onclick="setSessionValue()">Remve data from session</button>

<script>
function setSessionValue() {
 
   let value =	sessionStorage.removeItem("key_name");
    alert("data removed!");
}
</script>


</body>
</html>

Basic usage of sessionStorage

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();