Armazenamento local do HTML

Armazenamento local do HTML: superior aos cookies.

O que é o armazenamento local do HTML?

Através do armazenamento local (Local Storage), as aplicações web podem armazenar dados localmente no navegador do usuário.

Antes do HTML5, os dados das aplicações podiam ser armazenados apenas em cookies, incluindo cada solicitação do servidor. O armazenamento local é mais seguro e pode armazenar grandes quantidades de dados localmente sem afetar o desempenho do site.

Diferente do cookie, o limite de armazenamento é muito maior (pelo menos 5MB), e as informações não são transmitidas para o servidor.

O armazenamento local passa pelo origem (origin) (passando pelo domínio e protocolo). Todas as páginas, a partir da origem, podem armazenar e acessar os mesmos dados.

Suporte do navegador

O array na tabela indica a primeira versão do navegador que suporta completamente o armazenamento local.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Objeto de armazenamento local do HTML

O armazenamento local do HTML oferece dois objetos para armazenamento de 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 ao fechar a aba do navegador)

Ao usar armazenamento local, verifique o suporte do navegador para localStorage e sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Código para localStorage/sessionStorage
} else {
    // Desculpe! Web Storage não é suportado ..
}

Objeto localStorage

O objeto localStorage armazena dados sem data de expiração. Quando o navegador é fechado, os dados não são deletados e permanecem disponíveis no dia seguinte, na semana ou no ano.

Exemplo

// Armazenar
localStorage.setItem("lastname", "Gates");
// Recuperar
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Experimente você mesmo

Explicação do exemplo:

  • Criar um par de nome/valor no localStorage, onde: name="lastname", value="Gates"
  • Recuperar o valor de "lastname" e inseri-lo no elemento com id="result"

O exemplo também pode ser escrito assim:

// Armazenar
localStorage.lastname = "Gates";
// Recuperar
document.getElementById("result").innerHTML = localStorage.lastname;

A sintaxe para deletar o item localStorage "lastname" é a seguinte:

localStorage.removeItem("lastname");

Notas: Os pares de nome/valor são sempre armazenados como strings. Lembre-se de convertê-los para outros formatos, se necessário!

O exemplo a seguir conta o número de vezes que o usuário clicou no botão. No código, a string de valor é convertida em número e incrementa a contagem conforme necessário:

Exemplo

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Você clicou neste botão " +
localStorage.clickcount + " vezes.";

Experimente você mesmo

Objeto sessionStorage

O objeto sessionStorage é equivalente ao objeto localStorage, a diferença é que os dados são armazenados apenas para uma session. Se o usuário fechar uma aba específica do navegador, os dados também serão deletados.

O exemplo a seguir conta o número de cliques do usuário no botão na session atual:

Exemplo

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Nesta session, você já clicou neste botão " +
sessionStorage.clickcount + " vezes.";

Experimente você mesmo