JavaScript Web Storage (DOM Storage)

Web Storage aka DOM Storage is a mechanism for client-side persistent data storage.

Web Storage is often compared to HTTP cookies, however they differ in some ways:

  • Cookies are retransmitted with every request to the server making it impractical to store larger quantities of data
  • Web Storage offers much greater storage capacity (usually 5MB) unlike cookies which are limited to about 4KB
  • The data stored in the local storage area does not expire and spans accross different tabs and/or windows

The Web Storage specification was designed as a better and more secure way of storing data on the client. There are two types of storage, Session Storage and Local Storage, exposed through the sessionStorage and localStorage global objects, respectively.

Session Storage

Session storage is intended for short-lived data and is available through the sessionStorage attribute of the window object (i.e. it is a global object).

Data stored in the sessionStorage object is shared only with pages from the same domain opened in the same window/tab and does not persist after the window/tab is closed. Every time a user opens a page in a new window/tab, the browser creates a new session storage database.

Local Storage

The local storage mechanism allows to store data for more than a single session. Access to the local storage is available through the localStorage global object. The localStorage object is functionally identical to the sessionStorage, except that data stored in the local storage area is persistent and not limited to the lifetime of the window/tab.

The local storage area is shared across multiple windows/tabs thus being suitable for use in multi-transaction scenarios.

The Storage Interface

The Storage interface declares methods for storing, retrieving and deleting items. Both the sessionStorage and the localStorage are objects implementing the Storage interface. The methods and properties are as follows:

length
Retrieves the number of key/value pairs in the list
key(index)
Returns the key at the specified index
getItem(key)
Returns the value associated with the given key
setItem(key, value)
Sets a key/value pair
removeItem(key)
Removes the item with the specified key
clear()
Removes all key/value pairs

DOM Storage Events

The storage event is fired whenever a storage area changes. The storage event object has the following attributes:

key
Represents the key being changed
oldValue
Represents the old value of the key being changed
newValue
Represents the new value of the key being changed
url
Represents the URL of the page whose key changed
storageArea
Represents the Storage object that was affected

Web Storage Browser Support

The Web Storage specification is partially implemented in Internet Explorer 8, Firefox 3.5, Safari 4, Google Chrome 4 (support for the sessionStorage object was added in version 5), and Opera 10.50. As of 14 July 2010, only Opera supports the DOM Storage events.

See also

If you see a typo, want to make a suggestion or have anything in particular you'd like to know more about, please drop us an e-mail at hello at diveintojavascript dot com.

Copyright © 2010-2013 Dive Into JavaScript