Armazenamento local do HTML

Armazenamento local do HTML: melhor que os cookies.

O que é o armazenamento local do HTML?

Através do armazenamento local (Local Storage), os aplicativos web podem armazenar dados localmente no navegador do usuário.

Antes do HTML5, os dados do aplicativo 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, a restrição de armazenamento é muito maior (pelo menos 5MB), e as informações não são transmitidas para o servidor.

O armazenamento local é via origem (origin) (via 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 HTML

O armazenamento local HTML fornece 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 o armazenamento local, verifique o suporte do navegador para localStorage e sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Código para localStorage/sessionStorage
} else {
    // Desculpe! Não há suporte para Web Storage ..
}

Objeto localStorage

O objeto localStorage armazena dados sem data de expiração. Quando o navegador é fechado, os dados não são excluídos e estão disponíveis no próximo dia, semana ou ano.

Exemplo

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

Experimente pessoalmente

Explicação do exemplo:

  • Criar um par 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":

localStorage.removeItem("lastname");

Notas: O nome/valor é sempre armazenado como string. Lembre-se de convertê-lo para outro formato, se necessário!

Este exemplo 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 em sequência:

Exemplo

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

Experimente pessoalmente

Objeto sessionStorage

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

O exemplo a seguir conta os 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 pessoalmente