HTML5 Web Storage, Using localStorage and sessionStorage Objects

Web storage started as part of the HTML5 spec for storing key-value pair data in web clients. It now has its own spec. There are other plans for storing databases that are structured and can be queried using SQL which are handled in a separate spec .

Seeing the need for storing more key-value pair data on the web client than can currently be stored in a cookie, all major web browsers quickly adopted support for a storage object that can hold up to 5MB of data that persists until the web client’s cache is cleared or the storage object is programatically cleared, or in the case of sessionStorage, the browser window (tab) is closed.
This quick and relatively consistent adoption by web browsers is a rare treat for web developers.

IMPORTANT: Do not store sensitive data in web storage. When I do penetration testing, locally stored data is one of the first things that I look at.

IMPORTANT: All data in web storage is stored as strings. If you want to store an object, you should use JSON and call stringify() on it before storing it and parse() on it after retrieving it.

There are two flavors of the storage object that we will be looking at.

sessionStorage object

The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

Data stored in the sessionStorage object is accessible only from the page that initially stored the data.

localStorage object

Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache.

Data stored in the localStorage object is accessible only from the domain that initially stored the data.

Both localStorage and sessionStorage objects have the same interface, differing only in how the data stored by them persists and who can access the data.

The setItem method

setItem( key, value)
sessionStorage.setItem("name", "Sam")
localStorage.setItem("name", "Sam")

or the property using an expando
sessionStorage.name("Sam")
localStorage.name("Sam")

The getItem method

getItem(key)
name = sessionStorage.getItem("name")
name = localStorage.getItem("name")

or the property using an expando
name = sessionStorage.name
name = localStorage.name

The removeItem method

removeItem(key)
name = sessionStorage.removeItem("name")
name = localStorage.removeItem("name")

The property using an expando required an extra ‘delete’ keyword and is no longer in the spec.

The clear method

The clear() method causes the list associated with the object to be emptied of all key/value pairs

sessionStorage.clear
localStorage.clear

The key and length properties

Key and length are useful for looping through all of the key value pairs, especially if you don’t know what they all are.

Key is an index of the key values ( key(0), key(1), key(2) …)
Length is the number of keys.

for (var i=0, len = sessionStorage.length; i  <  len; i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

Storage Event

The storage event is fired on the window object whenever something changes in storage. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.

The storage event has the following attributes

key the named key that was added, removed, or modified
oldValue the previous value (now overwritten), or null if a
new item was added
newValue any the new value, or null if an item was removed
url the page which called a method that triggered this change
storageArea represents the Storage object that was affected.

Some online DEMOs

HTML5 Demos: Storage
Web Storage Example

Browser Compatibility (as of August, 2010)

Internet Explorer 8
Firefox 3.5 
Safari 4
Google Chrome 5
Opera 10.50

Only Opera supports the Storage event's attributes but I've verified that the storage event can be triggered on Chrome 5 and Firefox 3.6 though, the attributes for the event are all set to undefined.