The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
The two mechanisms within Web Storage are as follows:
sessionStorage
maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). localStorage
does the same thing, but persists even when the browser is closed and reopened. These mechanisms are available via the Window.sessionStorage
and Window.localStorage
properties (to be more precise, the Window
object implements the WindowLocalStorage
and WindowSessionStorage
objects, which the localStorage
and sessionStorage
properties hang off) — invoking one of these will create an instance of the Storage
object, through which data items can be set, retrieved and removed. A different Storage object is used for the sessionStorage
and localStorage
for each origin — they function and are controlled separately.
Note: In Firefox, when the browser crashes/restarts, to avoid memory issues caused by excessive usage of web storage, the amount of data saved per origin is limited to 10MB. See storage quotas and eviction criteria for more information.
Note: Access to Web Storage from third-party IFrames is denied if the user has disabled third-party cookies.
Storage
Allows you to set, retrieve and remove data for a specific domain and storage type (session or local).
Window
The Web Storage API extends the Window
object with two new properties — Window.sessionStorage
and Window.localStorage
— which provide access to the current domain's session and local Storage
objects respectively, and a storage
event handler that fires when a storage area changes (e.g., a new item is stored).
StorageEvent
The storage
event is fired on a document's Window
object when a storage area changes.
To illustrate some typical web storage usage, we have created a simple example, imaginatively called Web Storage Demo. The landing page provides controls that can be used to customize the color, font and decorative image. When you choose different options, the page is instantly updated; in addition your choices are stored in localStorage
, so that when you leave the page then load it again later on your choices are remembered.
In addition, we have provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as the StorageEvent
is fired.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Web_Storage_API |
4 | 12 | 2 | 8 | 10.5 | 4 | ≤37 | 18 | 4 | 11 | 3.2 | 1.0 |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Web_Storage_API |
4 | 12 | 3.5 | 8 | 10.5 | 4 | ≤37 | 18 | 4 | 11 | 3.2 | 1.0 |
BCD tables only load in the browser
BCD tables only load in the browser
Private windows, incognito mode, and similarly named privacy browsing options, don't store data like history and cookies. In private mode, localStorage
is treated like sessionStorage
. The storage APIs are still available and fully functional, but all data stored in the private window is deleted when the browser or browser tab is closed.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API