The Web Storage API includes two related mechanisms for persisting client-side data in a secure manner using the Document Object Model (DOM), sessionStorage and localStorage. These objects were introduced in Windows Internet Explorer 8.
Note: For versions of Windows Internet Explorer prior to version 8, persistent data storage is implemented by the userData behavior.
What is DOM Storage?
Web Storage is often compared to HTTP cookies. Like cookies, Web developers can store per-session or domain-specific data as name/value pairs on the client using Web Storage. However, unlike cookies, Web Storage makes it easier to control how information stored by one window is visible to another.
Web Storage also offers significantly more disk space than cookies. In Internet Explorer, cookies can store only 4 kilobytes (KB) of data. This byte total can be one name/value pair of 4 KB, or it can be up to 20 name/value pairs that have a total size of 4 KB. By comparison, Web Storage provides roughly 10 megabytes (MB) for each storage area.
Functionally, client storage areas are quite different from cookies. Web Storage doesn't transmit values to the server with every request as cookies do, nor does the data in a local storage area ever expire. And unlike cookies, it is easy to access individual pieces of data using a standard interface that has growing support among browser vendors.
Session storage is designed for scenarios where the user is carrying out a single transaction. The sessionStorage attribute of the window object maintains key/value pairs for all pages loaded during the lifetime of a single tab (for the duration of the top-level browsing context). For example, a page might have a check box that the user selects to indicate that he wants insurance.
A later page could then check, from script, whether the user had selected the check box.
The Storage object supports expando properties ('insurance' in the preceding example). If the property name does not exist, a key/value pair is automatically created to hold it. Note that key/value pairs are always stored as strings. Different data types such as numbers, Boolean values, and structured data must be converted to strings before persisting to a storage area.
After a value has been saved to sessionStorage, it can be retrieved by script running in another page in the same context. When another document is loaded, sessionStorage is initialised from memory for same-origin URLs. (See Security and Privacy section for more information.)
The local storage mechanism spans multiple windows and persists beyond the current session. The localStorage attribute provides persistent storage areas for domains. It allows Web applications to store nearly 10 MB of user data, such as entire documents or a user's mailbox, on the client for performance reasons.
For example, a Web site can display a count of how many times the user has visited a page with the following script.
Note: Before incrementing pageLoadCount it must first be converted to a number with the parseInt Method (JScript 5.6).
Each domain and subdomain has its own separate local storage area. Domains can access the storage areas of subdomains, and subdomains can access the storage areas of parent domains. For example,
localStorage['example.com'] is accessible to
example.com and any of its subdomains. The subdomain
localStorage['www.example.com'] is accessible to
example.com, but not to other subdomains, such as
The following properties and methods are supported by both session and local storage objects.
Removes all key/value pairs from the Web Storage area.
Returns a reference to the constructor of an object.
Retrieves the current value associated with the Web Storage key.
Retrieves the key at the specified index in the collection.
Retrieves the length of the key/value list.
Retrieves the remaining memory space, in bytes, for the storage object.
Deletes a key/value pair from the Web Storage collection.
Sets a key/value pair.
Web Storage Events