Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
Reading time: 20 minutes | Coding time: 10 minutes
The sessionStorage property is used to access a session Storage object for the current origin URL. It works similar to localStorage, the difference being that while data is stored permanently in localStorage and sessionStorage data is cleared when the browser tab is closed, ie when a page session ends.
Properties
Lasts as long as browser page is open. Survives over page reloads and restores.
Unlike cookies, sessionStorage has larger storage limit (at least 5 MB).
Opening multiple tabs or browsers of the same url creates one storage session per tab/browser.
Data stored in sessionStorage is specific to the protocol of the page, ie http://myapp.com/ will have separate storage than https://myapp.com/.
Closing the tab/browser clears Storage object.
Syntax
- Save data to sessionStorage:
sessionStorage.setItem("key","value");
- Get saved data from sessionStorage:
var data = sessionStorage.getItem("key");
- Remove saved data of particular key from storageSession:
sessionStorage.removeItem("key");
- Remove all data from storageSession:
sessionStorage.clear();
Following statements can also be used for
- Saving data:
sessionStorage.key="value";
- Getting saved data of particular key:
var data = sessionStorage.key;
Return Value
The return value is a Storage object.
Applications
The next question which arises is when to use sessionStorage instead of other storage mechanisms like localStorage and cookies.
-
Since sessionStorage is not secure, it can be used to store non-sensitive information like preferences and scores in games.
-
In ajax-driven dynamic interfaces, a lot of times there is nothing in place keeping track of the current state of the interface (which tab is open, for instance). sessionStorage can be used to store the state of the interface, so the page can be restored the way the user was looking at it.
-
User settings or preferences that are needed on every page, like special layout or template, can be stored in sessionStorage for easy access.
-
Actions that need to be done only once per login can be stored in sessionStorage, for example a news popup.
Example demonstration for storageSession
In this demonstration, we create a web page with a simple button. We will store the number of times the button has been clicked using sessionStorage.
Key ideas:
- Call a function clickCounter() on clicking the button using onclick attribute.
- In the function clickCounter(), for first run, initialize a session storage object and set it to 1
- In the function clickCounter(), for other runs, increment the integer stored in the session storage object.
- At the end of the clickCounter() function, update text in a div with the number of clicks recorded.
As a bonus, we have implemented a reset button where:
- Call a function clearCounter() on clicking the reset button using onclick attribute.
- clearCounter() function will delete the session storage object
<!DOCTYPE html>
<html>
<head>
<script>
//keep a count of the number of times the button is clicked
function clickCounter() {
if (typeof (Storage) != "undefined") {
if (sessionStorage.clickCount) {
//increment counter
sessionStorage.clickCount = Number(sessionStorage.clickCount) + 1;
} else {
//initialise counter
sessionStorage.clickCount = 1;
}
document.getElementById("button").innerHTML = "You have clicked the button " + sessionStorage.clickCount + " time(s) in this session.";
} else {
document.getElementById("button").innerHTML = "Sorry, your browser does not support web storage...";
}
}
//clear counter on button click
function clearCounter() {
if (typeof (Storage) != "undefined"){
//delete saved counter
sessionStorage.removeItem("clickCount");
document.getElementById("button").innerHTML = "You have clicked the button 0 time(s) in this session.";
}
else
document.getElementById("button").innerHTML = "Sorry, your browser does not support web storage...";
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p><button onclick="clearCounter()" type="button">Reset</button></p>
<div id="button"></div>
<p>Click the button to see the counter increase.</p>
<p>Click the reset button to clear the counter.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
Screenshot:
