The sessionStorage
property allows you to access a session Storage
object for the current origin. sessionStorage is similar to Window.localStorage
, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.
Syntax
// Save data to sessionStorage sessionStorage.setItem('key', 'value'); // Get saved data from sessionStorage var data = sessionStorage.getItem('key'); // Remove saved data from sessionStorage sessionStorage.removeItem('key'); // Remove all saved data from sessionStorage sessionStorage.clear();
Value
A Storage
object.
Example
The following snippet accesses the current domain's session Storage
object and adds a data item to it using Storage.setItem()
.
sessionStorage.setItem('myCat', 'Tom');
The following example autosaves the contents of a text field, and if the browser is accidentally refreshed, restores the text field content so that no writing is lost.
// Get the text field that we're going to track var 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 |
---|---|---|
Web Storage (Second edition) The definition of 'sessionStorage' in that specification. |
Recommendation |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
localStorage | 4 | 3.5 | 8 | 10.50 | 4 |
sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | ? | 8 | 11 | iOS 3.2 |
All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.
Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.