HTML5 Training (Web Storage)

One interesting addition to the HTML5 spec is web storage, a (better) way of storing data, both for long- and short term use.

Web Storage consists of two items that share most of their feature set with each other: for long term storage, there is localStorage, for short term storage, sessionStorage ought to be used. Both solutions could be considered cookies on steroids, as they provide most, if not all, features cookies provide, while at the same time not being limited to an extremely low 4KB limit.

localStorage

localStorage enables a developer to store a large amount of data in a SQLite database on the user's computer. This data will be available to pages under the domain that initially stored the data indefinitely or until the user cleans up his web applications cache, either manually or by using a Firefox extension such as BetterPrivacy. Contrary to cookies, this data does not have to be transmitted every time a request was made. Any and all data can be invalidated by utilizing timestamps.

sessionStorage

sessionStorage provides the same basic functionality as localStorage does, with the biggest exception being that data will only be available during the current (tab) session. Closing a tab ought to delete the data that was stored, however, by using features such as Firefox' "undo close last tab" function, all data can be restored. In any case, however, the data will be gone when the browser application is terminated.

Support

Support for Web Storage is widely available in recent versions of Firefox, Safari and Chrome, with Internet Explorer 8.0 having added support for it as well.

Showcases

Following are a number of screecasts that display the different features of Web Storage implementations.

The video below demonstrates how localStorage can be used to save data:

The video below demonstrates how localStorage is able to store data during a single browser session:

The video below demonstrates how localStorage is able to store data during multiple browser sessions:

The video below demonstrates how sessionStorage can be used to save data:

The video below demonstrates how sessionStorage is able to store data during a single browser session:

The video below demonstrates how sessionStorage is unable to store data during multiple browser sessions: