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.
Further Reading
Professional JavaScript for Web Developers Chapter Chapter 19 section on DOM Storage
Introducing HTML5 Chapter 6