The provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using . Web Storage API cookies Web Storage concepts and usage The two mechanisms within Web Storage are as follows: 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) sessionStorage Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. Data is never transferred to the server. Storage limit is larger than a cookie (at most 5MB). does the same thing, but persists even when the browser is closed and reopened. localStorage Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data Storage limit is the maximum amongst the three. These mechanisms are available via the and properties (to be more precise, in supporting browsers the Window object implements the and objects, which the and properties hang off) — invoking one of these will create an instance of the object, through which data items can be set, retrieved and removed. A different Storage object is used for the and for each origin — they function and are controlled separately. Window.sessionStorage Window.localStorage WindowLocalStorage WindowSessionStorage localStorage sessionStorage Storage sessionStorage localStorage : From Firefox 45 onwards, when the browser crashes/restarts, the amount of data saved per origin is limited to 10MB. This has been done to avoid memory issues caused by excessive usage of web storage. Note : Access to Web Storage from third-party IFrames is denied if the user has (Firefox implements this behaviour from onwards.) Note disabled third-party cookies version 43 Web Storage is not the same as (Mozilla's XPCOM interfaces to SQLite) or the (an storage utility for use by extensions). Note: mozStorage Session store API XPCOM Web Storage interfaces 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 object with two new properties — and — which provide access to the current domain's session and local objects respectively, and a event handler that fires when a storage area changes (e.g. a new item is stored.) Window Window.sessionStorage Window.localStorage Storage Window.onstorage StorageEvent The event is fired on a document's Window object when a storage area changes. storage Examples To illustrate some typical web storage usage, we have created a simple example, imaginatively called . The provides controls that can be used to customize the colour, font and decorative image. When you choose different options, the page is instantly updated; in addition your choices are stored in , so that when you leave the page then load it again later on your choices are remembered. Web Storage Demo landing page localStorage In addition, we have provided an — 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 is fired. event output page StorageEvent Specifications Browser compatibility Window.localStorage Window.sessionStorage Private Browsing / Incognito modes Most modern browsers support a privacy option called 'Incognito', 'Private Browsing' or something similar that doesn't store data like history and cookies. This is fundamentally incompatible with Web Storage for obvious reasons. As such, browser vendors are experimenting with different scenarios for how to deal with this incompatibility. Most browsers have opted for a strategy where storage APIs are still available and seemingly fully functional, with the one big difference that all stored data is wiped after the browser is closed. For these browsers there are still different interpretations of what should be done with existing stored data (from a regular browsing session). Should it be available to read when in Private mode? Then there are some browsers, most notably Safari, that have opted for a solution where storage is available, but is empty and has a quota of 0 bytes assigned, effectively making it impossible to write data to it. Developers should be aware of these different implementations and take them into account when developing websites depending on Web Storage APIs. For more information please have a look at that specifically deals with this topic. this WHATWG blog post See also Using the Web Storage API Browser storage limits and eviction criteria HTML5 Storage API By Venkatraman Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API Published under licence Open CC Attribution ShareAlike 3.0

Instantly

How to Store Data in The Browser using Web Storage API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

8 Biggest Google Ad Trends You Need to Know in 2024

9 in 10 Serverless Apps Are In Deep Trouble In Frontend Security

A Guide on Using the Cookie Store API

An Essential Guide to Angular User Login and Registration (Cookies and JWT)

An introduction to CSRF Attacks: Who Is Riding With You?

A Quick Introduction to the Resize Observer API

8 Biggest Google Ad Trends You Need to Know in 2024

9 in 10 Serverless Apps Are In Deep Trouble In Frontend Security

A Guide on Using the Cookie Store API

An Essential Guide to Angular User Login and Registration (Cookies and JWT)

An introduction to CSRF Attacks: Who Is Riding With You?

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps