HTML5 Rocks

HTML5 Rocks

HTML5 Features

Storage

When web developers think of storing anything about the user, they immediately think of uploading to the server. HTML5 changes that, as there are now several technologies allowing the app to save data on the client device. It might also be sync'd back to the server, or it might only ever stay on the client: that's down to you, the developer.

There are several reasons to use client-side storage. First, you can make your app work when the user is offline, possibly sync'ing data back once the network is connected again. Second, it's a performance booster; you can show a large corpus of data as soon as the user clicks on to your site, instead of waiting for it to download again. Third, it's an easier programming model, with no server infrastructure required. Of course, the data is more vulnerable and the user can't access it from multiple clients, so you should only use it for non-critical data, in particular cached versions of data that's also "in the cloud". See "Offline": What does it mean and why should I care? for a general discussion of offline technologies, of which client-side storage is one component.

What’s New

Offline Technologies

  • Web Storage simply provides a key-value mapping, e.g. localStorage["name"] = username;. Unfortunately, present implementations only support string-to-string mappings, so you need to serialise and de-serialise other data structures. You can do so using JSON.stringify() and JSON.parse().
  • Web SQL Database gives you all the power - and effort - of a structured SQL relational database.
  • Indexed Database is somewhere in between Web Storage and Web SQL Database. Like Web Storage, it's a straightforward key-value mapping, but it supports indexes like those of relational databases, so searching objects matching a particular field is fast; you don't have to manually iterate through every object in the store.
  • File Access is an API for reading file content in JavaScript. Given a set of files the user has added to a "file" input element, you can read the content of the file or reference it as a URL, e.g. if the user has specified an image file, you can show the image. There are also proposals underway for file writing capabilities.

For a detailed comparison of client-side storage techniques with code demos, see our Client-Side Storage article.

Demos

HTML5 Demos: Storage
Synchronization with localStorage
Timer demo

In the Wild

Mobile Gmail
MugTug Darkroom

Resources