Armazenamento Web: Comparativo entre localStorage, sessionStorage, Cookies e IndexedDB

Para criar aplicações web modernas e rápidas, é essencial saber como gerenciar dados no lado do cliente. Seja para salvar as preferências de um tema escuro, manter um carrinho de compras ativo ou gerenciar tokens de autenticação, o navegador oferece diferentes ferramentas. No entanto, escolher a tecnologia errada pode comprometer a segurança dos dados ou prejudicar a performance do site.

Resumo Comparativo

Recurso          localStorage    sessionStorage   Cookies          IndexedDB
──────────────────────────────────────────────────────────────────────────────
Capacidade       5-10 MB         5-10 MB          ~4 KB/cookie     100MB+
Persistência     Permanente      Duração da aba   Configurável     Permanente
Envia ao servidor Não             Não              Sim (cada req)   Não
Acesso           JS Síncrono     JS Síncrono      JS + HTTP        JS Assíncrono
Formato          String          String           String           Objetos/Blobs
Uso principal    Preferências    Estado Temp      Autenticação     Dados Complexos

localStorage: Persistência Simples

O localStorage permite armazenar pares de chave-valor que não expiram. Os dados permanecem guardados mesmo que o navegador seja fechado e reaberto, sendo ideais para configurações de interface que devem persistir por muito tempo.

// Salvar dados (apenas strings)
localStorage.setItem('tema', 'escuro');
localStorage.setItem('usuario', JSON.stringify({ nome: 'Carlos', id: 456 }));

// Recuperar dados
const tema = localStorage.getItem('tema'); // "escuro"
const usuario = JSON.parse(localStorage.getItem('usuario'));

// Remover um item específico
localStorage.removeItem('tema');

// Limpar todo o armazenamento do domínio
localStorage.clear();

// Verificar espaço ocupado
const bytes = new Blob(Object.values(localStorage)).size;
console.log(`${(bytes / 1024).toFixed(2)} KB em uso`);

Quando usar: Preferências de UI (como o estado de um menu lateral), configurações de idioma e dados que não contenham informações sensíveis.

⚠️ Aviso de Segurança: Nunca armazene senhas ou tokens de acesso sensíveis no localStorage. Ele é vulnerável a ataques de Cross-Site Scripting (XSS), pois qualquer script no seu domínio pode ler esses dados.

sessionStorage: Foco na Sessão Atual

A API do sessionStorage é idêntica à do localStorage, mas com uma diferença crucial: o ciclo de vida. Os dados são limpos assim que a aba ou janela do navegador é fechada. Além disso, os dados de uma aba não são compartilhados com outra, mesmo que seja o mesmo site.

// Salvar rascunho de formulário para evitar perda em refresh
const dadosForm = { titulo: input.value, corpo: textarea.value };
sessionStorage.setItem('rascunho_post', JSON.stringify(dadosForm));

// Restaurar ao carregar a página
window.addEventListener('load', () => {
  const rascunho = sessionStorage.getItem('rascunho_post');
  if (rascunho) {
    const { titulo, corpo } = JSON.parse(rascunho);
    input.value = titulo;
    textarea.value = corpo;
  }
});

Quando usar: Processos de checkout em múltiplas etapas, estados temporários de filtros de busca ou qualquer informação que só faça sentido durante uma única sessão de navegação.

Cookies: O Elo com o Servidor

Diferente das opções anteriores, os cookies são enviados automaticamente em cada requisição HTTP para o servidor. Por serem pequenos e limitados, sua principal função hoje é a gestão de sessões de usuário e rastreamento.

// Exemplo de configuração via servidor (Express.js)
res.cookie('sessao_id', 'xyz789', {
  httpOnly: true,   // Protege contra leitura via JavaScript (XSS)
  secure: true,     // Exige conexão HTTPS
  sameSite: 'Lax',  // Proteção básica contra CSRF
  maxAge: 3600000,  // Expira em 1 hora
});

// Manipulação simples via Client-side JS
document.cookie = "moeda=BRL; path=/; max-age=86400; SameSite=Strict";

Quando usar: Tokens de autenticação (JWT ou Session IDs) e identificadores de rastreamento de marketing. Sempre utilize as flags httpOnly e Secure para garantir a integridade dos dados.

IndexedDB: O Banco de Dados Completo

Se você precisa armazenar grandes volumes de dados estruturados, o IndexedDB é a solução. Ele funciona de forma assíncrona, permitindo indexação e transações, suportando até mesmo arquivos binários e blobs.

// Abrir conexão com o banco
const request = indexedDB.open('BancoLoja', 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('pedidos', { keyPath: 'id' });
};

request.onsuccess = (e) => {
  const db = e.target.result;
  const transacao = db.transaction('pedidos', 'readwrite');
  const loja = transacao.objectStore('pedidos');

  // Adicionando um objeto complexo
  loja.add({ id: 101, total: 150.00, itens: ['Teclado', 'Mouse'] });
};

Quando usar: Aplicações Offline (PWA), cache de grandes conjuntos de dados, editores de vídeo/imagem no navegador e armazenamento de logs detalhados.

Guia Rápido de Decisão

• Configurações de tema ou idioma? → Use localStorage.
• Dados de um formulário de várias etapas? → Use sessionStorage.
• Login e tokens de sessão? → Use Cookies (com HttpOnly).
• Carrinho de compras persistente? → Use localStorage ou sincronize com o banco via Cookie.
• Suporte Offline e PWA? → Use IndexedDB.
• Precisa enviar o dado para o back-end em cada clique? → Use Cookies.