Session Storage is the browser’s sessionStorage object from the Web Storage API. From a <script> in your HTML page you save string key-value pairs for the current tab. Data survives reloads of that HTML document and is cleared when the tab or window closes.
Loading a document in a tab creates a page session for that tab. The main page and same-origin iframes share that tab’s storage. A new tab gets a new session (unlike session cookies). Closing the tab ends the session and deletes the data.
Autosave draft text in an <input> or <textarea> across an accidental refresh, remember a wizard step for this visit only, or keep a temporary cart for one checkout tab—without sending data to a server.
Use sessionStorage for tab-scoped, temporary state. Use localStorage for settings that should persist across visits and be shared by every tab of the same origin.
Keys and values are strings. Store objects with JSON.stringify / JSON.parse.
Same-origin scripts can read sessionStorage. Never store passwords or payment secrets there.
A page opened with window.open may start with a copy of the opener’s sessionStorage, but the two stores stay separate afterward.
Call methods on sessionStorage from a script in your HTML document:
sessionStorage.setItem("key", "value");
var data = sessionStorage.getItem("key"); // string or null
sessionStorage.removeItem("key");
sessionStorage.clear(); // remove all keys for this tab
sessionStorage.key(0); // name of key at index
sessionStorage.length; // number of keys<input id="field" type="text">
<script>
var field = document.getElementById("field");
if (sessionStorage.getItem("autosave")) {
field.value = sessionStorage.getItem("autosave");
}
field.addEventListener("change", function () {
sessionStorage.setItem("autosave", field.value);
});
</script>How session storage fits into HTML pages and browser tabs:
| Concept | Meaning |
|---|---|
sessionStorage | Per-origin, per-tab Storage object on window |
| Page session | Lasts while the tab is open; survives HTML reloads |
setItem / getItem | Write and read string values |
removeItem / clear | Delete one key or all keys in this tab |
key / length | Inspect stored keys for debugging |
| Same origin | Scheme + host + port must match to share storage |
| New tab | Starts a new empty sessionStorage (separate from other tabs) |
localStorage | Persistent, shared across tabs of the same origin |
sessionStorage | localStorage | |
|---|---|---|
| Scope | One tab (top-level browsing context) | All tabs of the origin |
| Lifetime | Until tab/window closes | Until cleared by script or user |
| Survives reload? | Yes | Yes |
| Best for | Drafts, wizards, one-visit state | Theme, prefs, lasting data |
Wire storage to real form controls and page load.
input, textarea, buttons) with ids.change, call sessionStorage.setItem(key, value).DOMContentLoaded), getItem and restore into the control.removeItem when a step is finished, or clear to wipe the tab session.| Goal | Pattern |
|---|---|
| Save a string | sessionStorage.setItem("name", "Alex") |
| Restore after reload | input.value = sessionStorage.getItem("name") || "" |
| Store an object | setItem("cart", JSON.stringify(obj)) |
| Forget one key | sessionStorage.removeItem("name") |
| Reset the tab store | sessionStorage.clear() |
Save a value into this tab’s sessionStorage, then reload the page—the value stays until you clear it or close the tab.
Five patterns: save/read strings, JSON objects, remove keys, list keys, and a full HTML page demo.
sessionStorage.setItem("username", "JohnDoe");
var name = sessionStorage.getItem("username");
console.log(name); // JohnDoenull if missing.var cart = { items: 2, total: 19.99 };
sessionStorage.setItem("cart", JSON.stringify(cart));
var loaded = JSON.parse(sessionStorage.getItem("cart"));
console.log(loaded.total); // 19.99getItem.sessionStorage.setItem("temp", "draft");
sessionStorage.removeItem("temp");
console.log(sessionStorage.getItem("temp")); // nullfor (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i);
console.log(key, sessionStorage.getItem(key));
}Connect sessionStorage to HTML inputs so a name survives reload in this tab:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Session Storage Example</title>
</head>
<body>
<h1>Session Storage Example</h1>
<input type="text" id="input" placeholder="Enter your name">
<button type="button" id="save">Save</button>
<button type="button" id="load">Load</button>
<p id="result"></p>
<script>
document.getElementById("save").onclick = function () {
sessionStorage.setItem("userName", document.getElementById("input").value);
};
document.getElementById("load").onclick = function () {
var userName = sessionStorage.getItem("userName");
document.getElementById("result").textContent =
userName ? "Hello, " + userName : "No name saved";
};
var saved = sessionStorage.getItem("userName");
if (saved) {
document.getElementById("input").value = saved;
document.getElementById("result").textContent = "Welcome back, " + saved;
}
</script>
</body>
</html>sessionStorage.userName.Most surprises come from tab scope, string-only values, or blocked storage.
Opening the same HTML URL in another tab starts a new sessionStorage. Duplicate data only if you copy it yourself (or use localStorage).
Non-strings are coerced. Prefer explicit String(…) or JSON so you do not get "[object Object]".
null checksgetItem returns null when missing. Guard before writing into HTML inputs.
Very large strings can throw. Catch errors around setItem for big drafts.
file: / blocked cookiesSome environments throw SecurityError. Test over http(s). Privacy modes that block site data also block storage.
XSS can read sessionStorage. Keep tokens and PII on the server with proper auth cookies when possible.
sessionStorage is part of the Web Storage API and is supported in all modern browsers.
Per-tab Web Storage works across current browsers for same-origin HTML documents.
Bottom line: Use sessionStorage for tab-scoped drafts—support is widespread; watch privacy settings and file: origins.
setItem, getItem, removeItem, clear.One line: From your HTML page’s script, use sessionStorage for temporary, tab-only key-value data that outlives a refresh.
Open the full save/load HTML demo and reload the tab to see sessionStorage persist.
8 people found this page helpful