Window: sessionStorage property

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The read-onlysessionStorage property accesses a sessionStorage object for the currentorigin.sessionStorage is similar tolocalStorage; the difference is that whilelocalStorage is partitioned by origin only,sessionStorage is partitioned by both origin and browser tabs (top-level browsing contexts). The data insessionStorage is only kept for the duration of the page session.

Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is accessible only in that particular tab. The main document, and all embeddedbrowsing contexts (iframes), are grouped by their origin and each origin has access to its own separate storage area.
If the page has aopener, thesessionStorage is initially a copy of the opener'ssessionStorage object. However, they are still separate and changes to one do not affect the other. To prevent thesessionStorage from being copied, use one of the techniques that removeopener (seeWindow.opener).
A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.
Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
Closing the tab/window ends the session and clears the data insessionStorage.

Value

AStorage object which can be used to access the current origin'ssession storage space.

Exceptions

SecurityError

Thrown in one of the following cases:

The origin is nota valid scheme/host/port tuple. This can happen if the origin uses thefile: ordata: schemes, for example.
The request violates a policy decision. For example, the user has configured the browsers to prevent the page from persisting data.

Note that if the user blocks cookies, browsers will probably interpret this as an instruction to prevent the page from persisting data.

Examples

Basic usage

// Save data to sessionStoragesessionStorage.setItem("key", "value");// Get saved data from sessionStoragelet data = sessionStorage.getItem("key");// Remove saved data from sessionStoragesessionStorage.removeItem("key");// Remove all saved data from sessionStoragesessionStorage.clear();

Saving text between refreshes

The following example autosaves the contents of a text field, and if the browser isrefreshed, restores the text field content so that no writing is lost.

// Get the text field that we're going to tracklet field = document.getElementById("field");// See if we have an autosave value// (this will only happen if the page is accidentally refreshed)if (sessionStorage.getItem("autosave")) {  // Restore the contents of the text field  field.value = sessionStorage.getItem("autosave");}// Listen for changes in the text fieldfield.addEventListener("change", () => {  // And save the results into the session storage object  sessionStorage.setItem("autosave", field.value);});

Note:Please refer to theUsing the Web Storage API article for a full example.