HTML5: Armazenamento Persistente de Dados

Com o HTML5 podendo fazer sites e aplicativos mais complexos, é natural que precise armazenar os dados . A ideia é semelhante aos Cookies e Sessões, mas com a diferença é que esses dados não expiram e também são armazenadas no cliente, sem precisar de comunicação com o servidor.

Bem, assim como temos cookies e sessões, o HTML5 suporta as duas formas:

• sessionStorage: os dados são armazenados até que a página seja fechada;
• localStorage: os dados são armazenados indefinidamente, mesmo que feche a janela, desliga o computador e jogue na fogueira (menos, por favor). 

Ambos utilizam um sistema de pares com chaves, ou seja, associo um valor para uma palavra-chave. Para inserir o valor, utilizamos o método setItem. Vejamos o exemplo:

sessionStorage.setItem("minhaChave","Meu Valor");
localStorage.setItem("minhaChave2","Meu Valor 2");

Neste caso, se eu fechar a aba da página, o valor de "minhaChave" não vai existir, mas o valor de "minhaChave2" vai continuar armazenado. Outra coisa importante é que os valores armazenados são strings. Se você for armazenar números, por exemplo, vai precisar fazer a conversão de String para um tipo numérico.

Agora, para recuperar o valor, utilizamos o getItem:

var valor1 = sessionStorage.getItem("minhaChave");
var valor2 = localStorage.getItem("minhaChave2");

 Bem, já vimos para guardar e para recuperar, mas lembra que disse que, no caso do localStorage, os dados ficarão armazenados por tempo indefinido. Então se preciso apagar os valores, tem como? Tem até dois modos! Usamos os métodos removeItem para remover um item específico e o clear para limpar todos os dados:

sessionStorage.removeItem("minhaChave");
localStorage.clear();

Então pessoal, antes de fechar, só lembrando que as únicas páginas que podem acessar esses valores são aquelas do mesmo domínio. Durante a pesquisa, vi que alguns relatam que só do fato da página estiver em subdomínio diferente, os dados armazenados já não podem mais ser acessados.

Então até mais pessoal.