HTML5 Web Storage – localStorage/sessionStorage
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:
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 útil. T++