Session Storage
In short
Session storage is a browser feature that saves text as key-value pairs for one tab only; the data survives reloads but is deleted when the tab is closed.
What is session storage?
Session storage, used in JavaScript through the sessionStorage object, is part of the Web Storage API, alongside local storage. It stores strings under string keys with the same small set of methods: setItem, getItem, removeItem and clear. Objects are saved with JSON.stringify and read back with JSON.parse, and browsers typically allow about 5 MB per origin.
What sets it apart is its lifetime. The data belongs to one origin in one browser tab: it survives reloads and moving back and forth, but every new tab starts with its own empty storage, even for the same site, and closing the tab deletes it. A page opened from the tab with window.open starts with a copy, but after that the two are separate. This makes it a good fit for state that matters only during the current visit, such as a half-filled multi-step form, a scroll position or a message shown once per tab.
Think of session storage as a sticky note on one browser tab: handy while you work there and thrown away when you close it. Like local storage, it can be read by any script on the page, so a cross-site scripting (XSS) attack can steal what it holds, and it is no place for passwords or tokens.
The word session causes confusion. Session storage has nothing to do with a login session on the server or with session cookies: a session cookie is shared by every tab of the site, is sent to the server with each request and lasts until the browser closes, while sessionStorage stays in the browser, belongs to one tab and is never sent anywhere. Compared with local storage, the API is identical; only the lifetime and scope differ.
Key takeaways
- Session storage saves string key-value pairs in the browser for a single tab.
- The data survives reloads but is deleted when the tab is closed.
- It has the same API as
localStorage:setItem,getItem,removeItemandclear. - Each new tab gets its own storage, even for the same site.
- It is unrelated to server sessions and is never sent with requests.
Example
const form = document.querySelector("#signup");
// Save the fields on every change, for this tab only
form.addEventListener("input", () => {
const data = Object.fromEntries(new FormData(form));
sessionStorage.setItem("signup-draft", JSON.stringify(data));
});
// After a reload the draft comes back; a new tab starts empty
const draft = JSON.parse(sessionStorage.getItem("signup-draft") ?? "{}");
for (const [name, value] of Object.entries(draft)) {
if (form.elements[name]) form.elements[name].value = value;
}Readers ask
What is the difference between sessionStorage and localStorage?
They share the same API. localStorage data is shared by all tabs of a site and stays until it is deleted; sessionStorage data belongs to one tab and is deleted when that tab is closed.
Does sessionStorage survive a page refresh?
Yes. Reloading the page, or leaving and coming back in the same tab, keeps the data. Closing the tab, or the browser, clears it.
Is sessionStorage shared between tabs?
No. Each tab has its own storage, even for the same site. To share data between tabs, use localStorage, IndexedDB or a BroadcastChannel.
See also
- Local StorageWeb Development, p. 33Local storage is a browser feature that lets a website save text as key-value pairs on the user's device, where it stays even after the browser is closed.
- CookieWeb Development, p. 10A cookie is a small piece of data a website asks the browser to store and send back with later requests, often used to keep users logged in.
- SessionBackend & APIs, p. 47A session is a way for a server to remember a user across many requests, usually by keeping their data on the server and giving the browser a session ID.
- IndexedDBWeb Development, p. 28IndexedDB is a database built into web browsers that stores large amounts of structured data and files on the user's device, with indexes and transactions.
- Web BrowserWeb Development, p. 67A web browser is an application that fetches web pages from servers and turns their HTML, CSS, and JavaScript into the interactive pages you see on screen.
- XSSSecurity, p. 55XSS is a vulnerability that lets an attacker inject malicious JavaScript into a trusted website so that it runs in other users' browsers.
Sources
Spotted a mistake or something missing on this page?Suggest an edit