HTML5 storage instead of cookies...

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 accessit 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.

The technologies are:
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 Indexed Database, 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.

Local storage and session storage

In HTML5 we can do better than that: use sessionStorage and localStorage in place of cookies.

sessionStorage sets fields on the window. When the window is closed, the session fields are lost, even if the site remains open in another window.

localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.

These two web storage objects can be used to persist user data on the clientside for the length of the session or indefinitely. Their data is not transferred to the server via every HTTP request, either. They have an API that will make you happy to be rid of cookies. Here are both APIs, using cookies as a fallback.

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

// easy object property API
localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

// without sessionStorage we'll have to use a far-future cookie
// with document.cookie's awkward API :(
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
' expires='+expires+'; path=/';
document.cookie = cookiestr;
}

HTML5 Storage is supported by IE8, Firefox 3.5+, and Safari 4, Google Chrome..