Detalhando a API LocalStorage do JavaScript com exemplos

Para a maioria dos navegadores ou browser, a API de armazenamento fornece um mecanismo para armazenar pares de valores-chave no navegador. Geralmente é dividido em localStorage e sessionStorage, e a principal diferença entre os dois é por quanto tempo de armazenamento dos dados. Com sessionStorage, os dados são removidos assim que a sessão termina ou o navegador é fechado. Os dados em localStorage, no entanto, persistem até serem apagados.

Um exemplo comum do mundo real de localStorage é o jogo Wordle . Depois de digitar uma palavra e pressionar Enter, os valores são armazenados em localStorage. Se você fechar e reabrir a página do Wordle no mesmo dispositivo, obterá as mesmas palavras que já tentou uma vez. O armazenamento é redefinido no final do dia.

A resposta diária também é armazenada em localStorage, para que você possa jogar o jogo offline após abrir a página.

O recurso localStorage pode ser útil em vários casos de uso. Este artigo explicará mais sobre localStorage e como ele funciona, para que você possa usá-lo com seus aplicativos. 

Por que você precisa do localStorage?

Há vários recursos úteis no localStorage, incluindo a capacidade de armazenar informações do usuário e permitir que você trabalhe offline conforme necessário.

LocalStorage funciona de forma semelhante aos cookies. No entanto, ele pode armazenar uma quantidade maior de dados. O armazenamento disponível no Google Chrome é de 5 MB no máximo por domínio, enquanto o localStorage do Opera é de 3 MB, mas pode ser aumentado.

Como a Internet pode não estar acessível de forma consistente em todos os lugares, o localStorage permite que você coloque seu trabalho offline , assim como no Wordle.

Você também pode armazenar o estado da sua página, como por exemplo temas claro ou escuro, mas também com diferentes constrastes para ajudar deficientes visuais. Esta preferência não precisa está em um sistema com banco de dados mas sim no localStorage.

Benefícios do localStorage

O uso do localStorage oferece vários benefícios, incluindo o seguinte:

• Mais armazenamento : Conforme observado anteriormente, o localStorage pode armazenar até 5 MB de dados na maioria dos navegadores, muito mais do que os cookies podem armazenar.
• API amigável ao desenvolvedor : A API facilita o acesso e a adição de dados no localStorage. Em qualquer navegador, as funções localStorage são acessíveis a partir do Window objeto. Você pode adicionar dados apenas escrevendo window.localStorage.setItem (“Teste”, “Olá tudo bem!”).
• Persistência : Um dos motivos mais comuns para usar localStorage é manter os dados persistentes. Embora sessionStorage também possa armazenar dados em pares de valores-chave, ela é limpa quando a sessão termina. Com localStorage, no entanto, os dados são contínuos até que sejam removidos explicitamente.

Antipadrão: Salvar tokens de acesso

Existe uma prática do uso de localStorage para armazenar tokens de acesso, como tokens JWT, no lado do usuário para que ele permaneça conectado por um período de tempo especificado.

Isso é inseguro e nunca deve ser feito, pois é acessível usando JavaScript no mesmo domínio. Isso significa que qualquer código JavaScript em execução na página pode acessar o armazenamento, deixando seu aplicativo vulnerável a ataques de cross-site scripting (XSS).

Os aplicativos também costumam usar scripts de terceiros para obter análises ou anúncios e, se até mesmo um único script for comprometido, você corre o risco de ser hackeado.

Então evite utilizar o localStorage para armazenar dados sensíveis.

Casos de uso de armazenamento local

A seguir estão alguns casos de uso comuns para localStorage.

Salvando dados de formulários parcialmente enviados

Se um usuário estiver preenchendo um formulário longo, localStorage pode ser útil para armazenar dados parciais. Mesmo que a internet seja desconectada entre iniciar o formulário e enviá-lo, o usuário não perderá suas entradas e poderá continuar de onde parou.

Cache

De acordo com uma análise de 2022 da Portent , a taxa de conversão do cliente pode aumentar em 2,5 vezes quando sua página é carregada em menos de cinco segundos. Construir um site lento não é mais uma opção. Mas quando um usuário final solicita dados específicos e a solicitação precisa passar pela rede com latência associada, o armazenamento em cache pode ser um salva-vidas. O localStorage pode ser usado para armazenar em cache um site ou para armazenar dados estáticos para mostrar as informações do cliente mesmo quando a página estiver offline, e buscar os dados necessários quando a internet se reconectar.

Sincronizando dados entre guias

Usando localStorage, um usuário pode abrir um site com um componente de timer em uma guia do navegador, iniciar o timer, abrir outra guia do mesmo site e sincronizar o timer entre as duas guias. Você também pode sincronizar músicas ou seu player de vídeo entre as guias.

Dados pré-preenchidos

Você pode usar localStorage para armazenar uma versão pré-preenchida do seu aplicativo. Quando um usuário visita seu aplicativo, ele imediatamente vê algo na tela e, em seguida, seu aplicativo pode fazer chamadas para o back-end para buscar novas informações. Os sites de comércio eletrônico geralmente usam localStorage para armazenar itens que o usuário visualizou e outros dados específicos do usuário.

Executando operações no localStorage

Você tem alguns métodos para escolher ao realizar operações em localStorage. Eles são:

• setItem()

• getItem()

• removeItem()

• clear()

• key()

A seguir, mais detalhes sobre cada um.

Armazenando valores com setItem()

O setItem método é usado para armazenar valores em localStorage. Este método recebe dois parâmetros: uma chave e um valor. A chave é usada para buscar os dados posteriormente.

Aqui está um exemplo simples de como usar o setItem método para armazenar dados:

window.localStorage.setItem("Dado", "Dados salvo no localStorage")

Se você executar esse código em um console do navegador, ele armazenará uma chave com o nome Dado e um valor “Dados salvo no localStorage”.

Depois de executar o código, se você abrir a guia Aplicativos e clicar em localStorage , poderá ver o dado salvo.

Observe que você só pode armazenar strings em localStorage. (No Firefox e no Chrome, os dados localStorage são armazenados em um banco de dados SQLite.) Se você deseja manter arrays ou objetos, uma maneira direta é converter os dados em JSON usando o método JSON.stringify.

Acessando itens com getItem()

A API localStorage usa o getItem método para recuperar dados. O método recebe um único argumento que é a chave para os dados. Se os dados não forem encontrados, o método retornará null.

A sintaxe do código é mostrada abaixo:

window.localStorage.getItem("Dado"); // retorna 'Dados salvo no localStorage'
window.localStorage.getItem("Dadossss"); // retorna null

alert( window.localStorage.getItem("Dado") ); 

Removendo Item Específico com removeItem()

Como o nome sugere, o removeItem() método remove um par de valores-chave específico de localStorage. A sintaxe dos dados é semelhante a getItem. Também recebe um único parâmetro, a chave do item, e retorna undefined se o item não estiver disponível.

window.localStorage.removeItem("chave"); 

Você pode verificar a guia Aplicativos das ferramentas de desenvolvimento do navegador para confirmar que a chave foi removida.

Excluindo todos os itens comclear()

Se você deseja limpar localStorage de um domínio específico, use o clear método. Ele não recebe nenhum parâmetro e remove todos os itens localStorage do domínio.

window.localStorage.clear();

Recuperando nomes de chave comkey()

O key método é útil quando você deseja percorrer as chaves de localStorage. Leva um parâmetro de um número. O número pode ser uma posição de índice do item localStorage.

Aqui está um exemplo:

window.localStorage.setItem('Teste', 'teste'); // Armazena novo item
window.localStorage.key(0); // Retorna: Teste

O valor retornado pode ser diferente se seu localStorage para o domínio já tiver algum valor.

Monitorando eventos de armazenamento.

Para monitorar eventos relacionados ao localStorage com DOM, use o método storage event. Colocá-lo dentro de um window.addEventListener pode ajudá-lo a realizar operações DOM ao invocar um evento de armazenamento.

Abaixo está um exemplo simples de escuta de storage eventos:

window.addEventListener("storage", myFunction);
function myFunction(event) {
  document.getElementById("app").innerHTML = "Change Made";
}
function changeValue() {
  const newWindow = window.open("", "myWindow");
  newWindow.localStorage.setItem("mytime", Date.now());
  newWindow.close();
}

Sempre que uma alteração é feita em localStorage, o código define um HTML interno para o div com o ID app como Change Made. Nesse caso, um novo item é adicionado ao localStorage para a nova janela e, após gravar o valor em localStorage, a janela é fechada.

Aqui está o HTML para o código acima:

<h1 id="app"></h1>
<button onclick="changeValue()">Alterar valor</button>

LocalStorage vs. SessionStorage

LocalStorage e sessionStorage têm algumas semelhanças. Por exemplo:

• Ambos os tipos de armazenamento são oferecidos pela API de armazenamento
• Ambos podem armazenar apenas valores do tipo string
• O limite de dados é de cerca de 5 MB na maioria dos casos
• Ambos os tipos de armazenamento só podem armazenar valores em pares de valores-chave

No entanto, existem várias diferenças entre os dois. Uma é a persistência: os dados armazenados em localStorage persistem durante as sessões. Abrir uma nova guia, visitar um novo domínio ou fechar o navegador não limpará localStorage. Por outro lado, sessionStorage é limpo sempre que uma sessão termina. Abrir uma nova guia ou visitar um novo domínio limpará a sessão de um domínio específico.

Outra diferença é que, no caso de alguns navegadores, localStorage não funciona no modo de navegação anônima, mas sessionStorage sim. Nesses casos, é uma boa ideia escrever um wrapper para seu código localStorage para usar sessionStorage.

LocalStorage vs. IndexedDB

IndexedDB é uma API para armazenar uma grande quantidade de dados estruturados, incluindo arquivos, no lado do cliente. Os dados armazenados usando IndexedDB também são persistentes e são armazenados até serem explicitamente limpos. IndexedDB também oferece um mecanismo interno para controle de versão de esquema.

IndexedDB oferece vários benefícios sobre localStorage. Por exemplo, IndexedDB não bloqueia o DOM quando usado com um trabalhador, ao contrário de localStorage. No entanto, localStorage é um pouco mais rápido que IndexedDB. A API do localStorage também é muito mais fácil de começar, tornando-a a escolha mais popular.

A principal razão para a introdução do IndexedDB foi fazer uma versão melhor do localStorage. Então, por que não usar IndexedDB em todos os casos? Se você deseja armazenar dados estruturados no lado do cliente, IndexedDB é a melhor escolha, especialmente porque localStorage não foi criado para armazenar informações confidenciais. Mas se você estiver armazenando uma quantidade simples e pequena de dados de pares de valores-chave, use localStorage.

O recurso localStorage pode oferecer benefícios para seus aplicativos, incluindo armazenamento aberto para manter os dados pelo tempo que você precisar e a capacidade de fazer seus aplicativos funcionarem offline. Essa forma de armazenamento de dados não será a melhor escolha em todos os casos de uso e talvez seja necessário considerar IndexedDB em alguns casos.