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.
There are two flavors of the storage object that we will be looking at.
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.
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 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.
Introducing HTML5 Chapter 6