Dive Into JavaScript

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

• JavaScript Web Storage Tutorial: Creating an Address Book Application