Local storage

Old information from 2009 or thereabouts. Will have to update it.

Here is information about local storage and session storage.

Otherwise the two storage objects work exactly the same. The storage object in the code examples below can stand for either localStorage or sessionStorage.

Cookies must be enabled in Firefox. Test other browsers.

Test page.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
clear()
Clear the entire storage 		No Yes No Incomplete No Yes No No To be tested 
storage.clear()

Clear all values from the storage object.

  • Firefox supports this method only on localStorage, and not on sessionStorage.
getItem()
Get a value by key 		No Yes No Yes No Yes No No To be tested 
var x = storage.getItem('ppk')

Get the stored value by name.
key()
Retrieve keys by number 		No Yes No Yes No Yes No No To be tested 
var x = storage.key(1)

x now contains the second key in the storage object. Exactly which key is considered the second depends on the browser. In practice this method is meant for looping through all keys.

Entering a key that does not exist throws an error.
length
The number of keys stored 		No Yes No Yes No Yes No No To be tested 
storage.length

The number of keys stored in the storage object.
removeItem()
Remove a key and its value 		No Yes No Yes No Yes No No To be tested 
storage.removeItem('ppk')

Remove a named item from the storage.
setItem()
Set a value by key 		No Yes No Yes No Yes No No To be tested 
storage.setItem('ppk','JavaScript')

Set a value to a key.
storage event
Fires when the storage changes 		No Yes No Yes No Yes No No To be tested 
document.addEventListener('storage',handleStorage,false)

This event fires on all pages that come from the same site when a local storage field is changed.

If a session field is changed, it fires only in the relevant window.

Thus, scripts in pages opened in other tabs or windows can also update their storage use.

Safari requires you to define your event listener on the <body>; IE requires it to be set on the document. Firefox doesn’t care.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
storage event - domain property
The domain in which this storage is active Mozilla proprietary 		No No Yes No No No To be tested 
storageEvent.domain

The domain the field is stored in.
storage event - key property
What’s the key of the changed field? 		No No No Yes No No To be tested 
storageEvent.key

The key of the changed field.
storage event - newValue property
What’s the new value of the changed field? 		No No No Yes No No To be tested 
storageEvent.newValue

The new value of the affected field.
storage event - oldValue property
What’s the old value of the changed field? 		No No No Yes No No To be tested 
storageEvent.oldValue

The old value of the affected field. Is null when the clear() method is used.
storage event - uri property
What’s the url of the page that changed the field? Apple proprietary 		No No No Yes No No To be tested 
storageEvent.uri

The URL of the page that changed the field.
storage event - url property
What’s the url of the page that changed the field? 		No No Yes No No No To be tested 
storageEvent.url

The URL of the page that changed the field.
storage event - source property
Gets the windowProxy of the window the change happened in (or something) 		No No No Yes No No To be tested 
storageEvent.source

The window in which the field was changed.

This property is pretty interesting, because it allows you to create a connection between two totally separate windows.

So far, windows could only influence each other if they knew of each other’s existence; i.e. if one window was opened by the other by means of JavaScript.

With the source property this restriction is lifted. You can basically define a storage event in all pages on your site, change one field, and let all other opened pages from this site connect to the window that changed the field.
storage event - storageArea property
Did the change happen in the localStorage or sessionStorage object? 		No No No No No To be tested 
storageEvent.storageArea

Whether a local or a session field was changed.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7