The read-only sessionStorage
property accesses a session Storage
object for the current origin. sessionStorage
is similar to localStorage
; the difference is that while data in localStorage
doesn't expire, data in sessionStorage
is cleared when the page session ends.
- A page session lasts as long as 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.
- Opening multiple tabs/windows with the same URL creates
sessionStorage
for each tab/window. - Closing a tab/window ends the session and clears objects in
sessionStorage
.
Data stored in sessionStorage
is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different sessionStorage
object from the same site accessed with HTTPS (e.g., https://example.com).
The keys and the values are always in the UTF-16 DOMString
format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.
Syntax
myStorage = window.sessionStorage;
Value
A Storage
object which can be used to access the current origin's session storage space.
Exceptions
SecurityError
- The request violates a policy decision, or the origin is not a valid scheme/host/port tuple (this can happen if the origin uses the
file:
ordata:
scheme, for example). For example, the user may have their browser configured to deny permission to persist data for the specified origin.
Example
The following snippet accesses the current origin's session Storage
object and adds data to it with Storage.setItem()
.
sessionStorage.setItem('myCat', 'Tom');
The following example autosaves the contents of a text field, and if the browser is refreshed, restores the text field content so that no writing is lost.
// Get the text field that we're going to track let 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 field field.addEventListener("change", function() { // And save the results into the session storage object sessionStorage.setItem("autosave", field.value); });
Note: Please refer to the Using the Web Storage API article for a full example.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'sessionStorage' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
sessionStorage | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 2 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support