O que é Armazenamento Local?
Com o armazenamento local, os aplicativos da Web podem armazenar dados localmente no navegador do usuário.
Antes do HTML5, os dados do aplicativo precisavam ser armazenados em cookies, incluídos em cada solicitação de servidor. O armazenamento local é mais seguro e grandes quantidades de dados podem ser armazenados localmente, sem afetar o desempenho do site.
Ao contrário dos cookies, o limite de armazenamento é muito maior (pelo menos 5 MB) e as informações nunca são transferidas para o servidor.
O armazenamento local é por origem (por domínio e protocolo). Todas as páginas, a partir de uma origem, podem armazenar e acessar os mesmos dados.
Suporte do navegador
Os números na tabela especificam a primeira versão do browser que suporta totalmente o Armazenamento Local.
O armazenamento local fornece dois objetos para armazenar dados no cliente:
Window.localStorage – armazena dados sem data de expiração
Window.sessionStorage – armazena dados para uma sessão (os dados são perdidos quando a guia do navegador é fechada)
Antes de usar o armazenamento local, verifique o suporte do navegador para localStorage e sessionStorage:
if (typeof(Storage) !== "undefined") {
// Código para localStorage/sessionStorage.
} else {
// Sem suporte a local storage
}
O objeto localStorage
O objeto localStorage armazena os dados sem data de validade. Os dados não serão apagados quando o navegador estiver fechado e estarão disponíveis no dia, semana ou ano seguinte.
Exemplo
// Inserir dados
localStorage.setItem("sobrenome", "Silva");
// Receber dados
document.getElementById("result").innerHTML = localStorage.getItem("sobrenome");
A sintaxe para remover o item “lastname” localStorage é da seguinte maneira:
localStorage.removeItem(“lastname”);
O objeto sessionStorage
O objecto sessionStorage é igual ao objeto localStorage, excepto que ele armazena os dados para apenas uma sessão. Os dados são excluídos quando o usuário fecha a guia do navegador específico.
O exemplo a seguir conta o número de vezes que um usuário clicou em um botão, na sessão atual:
Exemplo
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Você clicou no botão " +
sessionStorage.clickcount + " vezes nessa seção.";
Compatibilidade
Agora, se você deseja implementar esse tipo de funcionalidade hoje, fique atento aos navegadores. Usando o Modernizr você consegue detectar o suporte dos browsers para essa API.
if (Modernizr.localstorage) {
// esse navegador suporta HTML5 Storage :D
} else {
// esse navegador NÃO suporta HTML5 Storage :(
}