JavaScript Storage & BOM
sessionStoragebehaves likelocalStoragebut clears when the tab closes.
The methods are identical; only the lifetime differs.
Each tab also gets its own separate storage.
Example
javascript
sessionStorage.setItem("step", "2");
console.log(sessionStorage.getItem("step"));The output is 2.
Data is cleared when the tab or window closes.
Each tab has its own storage, even for the same site.
The methods are exactly the same as localStorage.
Syntax
javascript
sessionStorage.setItem("key", "value");Swap localStorage for sessionStorage and nothing else changes.
Every method from localStorage works identically here.
Example
javascript
sessionStorage.setItem("a", "1");
console.log(sessionStorage.getItem("a"));
sessionStorage.removeItem("a");
console.log(sessionStorage.getItem("a"));Nothing about the interface changes, only the lifetime.
This is the classic use case.
Example
javascript
sessionStorage.setItem("formStep1", JSON.stringify({ name: "Ada" }));
const saved = JSON.parse(sessionStorage.getItem("formStep1"));
console.log(saved.name);If the visitor closes the tab, the half-finished form is gone, which is usually right.
Two tabs on the same site each have their own sessionStorage.
This is different from localStorage, which is shared.
Example
javascript
sessionStorage.setItem("tabId", "one");
console.log(sessionStorage.getItem("tabId"));A second tab opened separately would not see this value.
Use sessionStorage for data that should not outlive the visit.
Use localStorage for preferences that should persist.
Example
javascript
localStorage.setItem("theme", "dark");
sessionStorage.setItem("currentStep", "3");
console.log(localStorage.getItem("theme"));
console.log(sessionStorage.getItem("currentStep"));Both can be used side by side for different purposes.
The same rule applies as with localStorage.
Example
javascript
sessionStorage.setItem("count", 5);
console.log(typeof sessionStorage.getItem("count"));The output is string, not number.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript sessionStorage</title>
</head>
<body>
<h1>sessionStorage</h1>
<p id="out"></p>
<script>
let visits = Number(sessionStorage.getItem("visits") || 0);
visits = visits + 1;
sessionStorage.setItem("visits", visits);
document.getElementById("out").textContent =
"Page views this tab session: " + visits;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try reloading:
Reload the page a few times and watch the count rise.
sessionStorage clears when the tab closes.localStorage.sessionStorage is localStorage with a shorter memory.
The choice between them is entirely about how long the data should live.
Both can be used together for different kinds of state.