HTML5 compatibility

Last major update on 12 June 2009.

These compatibility tables detail support for the new HTML5 functionalities in all modern browsers.

Overview

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
localStorage and sessionStorage

Details
No Yes No Yes No Yes No No To be tested
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
inputs

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.

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

These compatibility tables are sponsored by

Google