Web Storage API: guia de localStorage e sessionStorage em JavaScript

A Web Storage API é uma API do navegador que permite armazenar dados localmente em formato chave/valor usando localStorage and sessionStorage. Ela é muito usada em aplicações web para salvar preferências, estados de interface, formulários temporários e dados simples diretamente no navegador.

Na prática, ela ajuda quem desenvolve com JavaScript a guardar informações no próprio navegador sem enviar esses dados em todas as requisições HTTP, como acontece com cookies comuns.

Por que usar Web Storage em vez de cookies?

Cookies continuam úteis, especialmente quando uma informação precisa ser enviada ao servidor, como em sessões, autenticação e preferências que dependem do backend. Mas nem todo dado local precisa viajar a cada requisição.

O Web Storage é indicado para dados simples usados no lado do cliente, como tema claro ou escuro, filtros de interface, rascunhos temporários e estados que ajudam a melhorar a experiência do usuário.

• Greater capacity: em geral, cerca de 5MB por origem, dependendo do navegador.
• Menos tráfego: os dados não são enviados automaticamente ao servidor.
• API simples: os métodos principais são nativos do JavaScript e fáceis de usar.

Diferença entre localStorage, sessionStorage e cookies

Na prática, localStorage and sessionStorage são mais indicados para dados usados apenas no navegador. Cookies continuam importantes quando a informação precisa ser enviada ao servidor, como em autenticação e sessões.

Como usar localStorage em JavaScript

O localStorage mantém os dados salvos mesmo depois que o usuário fecha a aba ou o navegador. Os dados só são removidos por código, limpeza manual do navegador ou regras da própria aplicação.

// salvar dado
localStorage.setItem("tema", "escuro");
// recuperar dado
const tema = localStorage.getItem("tema");
// remover dado específico
localStorage.removeItem("tema");
// limpar todos os dados do localStorage
localStorage.clear();

Como usar sessionStorage em JavaScript

O sessionStorage funciona melhor para dados temporários. Ele mantém as informações apenas enquanto a aba ou sessão está aberta, por isso é útil em fluxos como checkout, formulários em etapas e estados transitórios.

// salvar dado temporário
sessionStorage.setItem("etapa", "checkout");
// recuperar dado temporário
const etapa = sessionStorage.getItem("etapa");
// remover dado temporário
sessionStorage.removeItem("etapa");
// limpar dados da sessão
sessionStorage.clear();

Métodos principais: setItem, getItem, removeItem e clear

As duas interfaces usam os mesmos métodos principais. A diferença está no tempo de vida dos dados salvos.

• setItem(chave, valor): salva um valor em uma chave.
• getItem(chave): recupera o valor salvo.
• removeItem(chave): remove um item específico.
• clear(): remove todos os dados daquela storage.

Use clear() com cuidado, porque ele apaga todos os dados salvos naquela área de armazenamento. Em aplicações maiores, isso pode afetar outras partes do sistema.

Como salvar objetos no localStorage

O Web Storage armazena valores como texto. Por isso, para salvar objetos ou arrays, é necessário converter os dados com JSON.stringify e recuperar com JSON.parse.

const usuario = {
  nome: "Felipe",
  tema: "escuro"
};
localStorage.setItem("usuario", JSON.stringify(usuario));
const usuarioSalvo = JSON.parse(localStorage.getItem("usuario"));
console.log(usuarioSalvo.nome);

Antes de usar JSON.parse, é recomendável verificar se o valor existe para evitar erro ao tentar converter um valor nulo.

const dados = localStorage.getItem("usuario");
if (dados) {
  const usuario = JSON.parse(dados);
  console.log(usuario);
}

O que não salvar no Web Storage

Apesar de útil, o Web Storage não deve ser usado para guardar senhas, dados bancários, documentos pessoais ou informações sensíveis. Como localStorage and sessionStorage podem ser acessados via JavaScript, uma falha de XSS pode expor os dados armazenados no navegador.

Para autenticação, avalie o contexto da aplicação. Em muitos casos, cookies HttpOnly, Secure and SameSite podem ser mais adequados para dados sensíveis relacionados à sessão.

Erros comuns ao usar localStorage e sessionStorage

• Salvar objetos sem usar JSON.stringify.
• Usar JSON.parse sem verificar se o valor existe.
• Salvar dados sensíveis no navegador.
• Usar localStorage para dados que deveriam expirar.
• Usar sessionStorage esperando que os dados continuem após fechar a aba.
• Usar localStorage.clear() e apagar dados de outras partes da aplicação.
• Esquecer que os dados ficam disponíveis apenas no navegador do usuário.

Conclusion

Entender a Web Storage API é importante para quem desenvolve aplicações web em JavaScript, especialmente quando é preciso salvar preferências, estados de interface ou dados temporários diretamente no navegador.

localStorage é útil para dados persistentes no navegador, sessionStorage funciona melhor para dados temporários da sessão, e cookies continuam importantes quando a informação precisa ser enviada ao servidor.

Perguntas frequentes sobre Web Storage API

O que é Web Storage API?

A Web Storage API permite armazenar dados no navegador em formato chave/valor usando localStorage and sessionStorage.

Qual a diferença entre localStorage e sessionStorage?

O localStorage mantém os dados mesmo após fechar o navegador. O sessionStorage mantém os dados apenas enquanto a aba ou sessão estiver aberta.

localStorage substitui cookies?

Não exatamente. localStorage pode substituir cookies em alguns casos de armazenamento local, mas cookies ainda são usados para sessões, autenticação e comunicação com o servidor.

Posso salvar objetos no localStorage?

Sim, mas é preciso converter o objeto para texto usando JSON.stringify e recuperar com JSON.parse.

localStorage é seguro para salvar tokens?

Depende do contexto, mas não é recomendado salvar dados sensíveis no localStorage se a aplicação tiver risco de XSS.

sessionStorage apaga quando fecha o navegador?

Sim. O sessionStorage apaga os dados quando a aba ou sessão é encerrada.

Links relacionados

Se você está estudando desenvolvimento web, também pode gostar do texto sobre PWA e aplicações web progressivas, já que armazenamento local e funcionamento offline costumam aparecer no mesmo contexto de aplicações modernas em JavaScript.