Web Storage ou LocalStorage é uma nova especificação do HTML5 que visa fornecer um mecanismo para armazenar dados via chave/valor localmente no navegador do cliente. Esta especificação se difere do modelo clássico de cookies, primeiro por não possuir data de expiração e segundo por não enviar nenhum dado para o servidor a cada requisição poupando assim um pouco de banda.

Basicamente existem dois tipos de armazenamento local:

sessionStorage: armazena os valores somente enquanto a janela/aba estiver aberta. Então se fechar a janela/aba e abrir novamente a mesma página os dados não vão estar lá.

localStorage: este modo é mais permanente, os dados só serão apagados se isso for feito explicitamente em código. Então você pode fechar o navegador, desligar o computador por um ano e os dados armazenados ainda vão estar lá.

OBS.: lembrando que por motivos de segurança os dados armazenados tanto por sessionStorage e localStorage são somente acessados estando no domínios que foram criados, o que pode causar problemas com sub-domínios.

Então como brincamos com isso? basicamente basta utilizar os métodos setItem( chave , valor ) para adicionar um valor e getItem( chave ) para recuperar o valor armazenado.

//adicionar um valor
localStorage.setItem('chave','valor');
sessionStorage.setItem('chave','valor');

//recuperando o valor
var valor = localStorage.getItem('chave');
var valor2 = sessionStorage.getItem('chave');

Também podemos utilizar os colchetes como se fosse um array associativo

//adicionar um valor
localStorage['chave'] = 'valor';
sessionStorage['chave'] = 'valor';

//recuperando o valor
var valor = localStorage['chave'];
var valor2 = sessionStorage['chave'];

Como os dados armazenados em localStorage só são apagados explicitamente é bom sabermos como:

//apagando somente uma chave
localStorage.removeItem('chave');

//apagando todos os dados armazenados
localStorage.clear();

Este é um recurso bem simples e pode ser utilizado para muitas coisas segue abaixo dois exemplos:

Lista

Formulário

Lembrando que este recurso só está disponível nos navegadores: IE 8.0+, Firefox 3.5+, Safari 4.0+, Chrome 4.0+, Opera 10.5+, iPhone 2.0+, Android 2.0+, mas podemos testar se o navegador dá suporte através da biblioteca Modernizer que detecta recursos HTML5 e CSS3 no navegar.

if (Modernizr.localstorage) {
  // window.localStorage é suportado pelo seu navegador!
} else {
  // não há suporte nativo ao HTML5 storage no seu navegador!  
  // tente talvez dojox.storage ou alguma solução de terceiros
}

Espero que seja util. T+++