Cookies vs localStorage vs sessionStorage: Escolhendo Armazenamento

Ao construir uma aplicação web, muitas vezes você precisa armazenar dados no lado do cliente — seja a preferência de tema de um usuário, um carrinho de compras ou um token de autenticação. As três principais opções são cookies, localStorage e sessionStorage. Cada uma tem características distintas que a tornam adequada para diferentes cenários. Escolher a errada pode levar a vulnerabilidades de segurança, problemas de desempenho ou uma experiência ruim para o usuário.

Este artigo detalha as diferenças, fornece orientações práticas e ajuda você a decidir qual mecanismo de armazenamento usar em seu próximo projeto.

Comparação Rápida

Antes de entrar em detalhes, aqui está uma visão geral dos três tipos de armazenamento:

Cookies: O Armazenamento Original do Cliente

Cookies existem desde os primeiros dias da web. São pequenos pedaços de dados (máximo ~4KB) que o navegador armazena e envia automaticamente ao servidor a cada requisição HTTP para o mesmo domínio.

Quando Usar Cookies

• Sessões de autenticação: Armazene IDs de sessão ou tokens que o servidor precisa validar a cada requisição. Use os atributos HttpOnly, Secure e SameSite para mitigar riscos de XSS e CSRF.
• Personalização no lado do servidor: Quando o servidor precisa conhecer as preferências do usuário (ex.: idioma, tema) antes de renderizar a página.
• Rastreamento e análise: Cookies podem persistir entre sessões e ser compartilhados entre subdomínios se configurados.

Considerações de Segurança

Cookies são enviados automaticamente, o que os torna vulneráveis a CSRF se usados para autenticação sem proteções adicionais. Sempre defina o atributo SameSite (Lax ou Strict) e considere usar tokens CSRF. Para dados sensíveis, use HttpOnly para impedir o acesso via JavaScript, reduzindo o impacto de XSS.

Exemplo de como definir um cookie seguro em uma resposta HTTP:

Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600

localStorage: Armazenamento Persistente de Chave-Valor

O localStorage fornece um armazenamento simples de chave-valor que persiste mesmo após o navegador ser fechado. Os dados são armazenados por origem (protocolo + domínio + porta) e não são enviados ao servidor automaticamente. É ideal para armazenar dados não sensíveis que devem sobreviver a recarregamentos de página e reinicializações do navegador.

Quando Usar localStorage

• Preferências do usuário: Tema (claro/escuro), tamanho da fonte, idioma ou configurações de layout.
• Cache: Armazenar respostas de API ou dados estáticos para reduzir requisições de rede e melhorar a experiência offline.
• Estado no lado do cliente: Conteúdo do carrinho de compras, rascunhos de formulários ou feature flags.

Considerações de Segurança

O localStorage é acessível via JavaScript, então qualquer vulnerabilidade de XSS pode expor todos os dados armazenados. Nunca armazene informações sensíveis como senhas, números de identificação pessoal ou tokens de autenticação, a menos que você tenha proteções robustas contra XSS. Se precisar armazenar tokens, considere usar a abordagem de cookie HttpOnly.

Exemplo de uso do localStorage:

// Salvar preferência do usuário
localStorage.setItem('theme', 'dark');

// Recuperar preferência
const theme = localStorage.getItem('theme');

// Remover item
localStorage.removeItem('theme');

sessionStorage: Armazenamento por Aba

O sessionStorage é semelhante ao localStorage, mas com vida útil mais curta: os dados são apagados quando a aba ou janela é fechada. Ele tem escopo limitado a uma única aba, então os dados não são compartilhados entre abas ou janelas, mesmo para a mesma origem.

Quando Usar sessionStorage

• Formulários de várias etapas: Armazenar temporariamente dados do formulário conforme o usuário avança pelas etapas, sem persistir após a conclusão.
• Estado de aba única: Dados que não devem vazar entre abas, como um estado de autenticação temporário ou um token de uso único.
• Operações sensíveis: Quando você quer que os dados sejam automaticamente apagados quando o usuário fecha a aba, reduzindo a exposição.

Considerações de Segurança

Assim como o localStorage, o sessionStorage é vulnerável a XSS. No entanto, sua vida útil limitada e escopo por aba reduzem a janela de oportunidade para atacantes. Ainda assim, evite armazenar dados altamente sensíveis.

Exemplo de uso do sessionStorage:

// Salvar dados do formulário
sessionStorage.setItem('formStep1', JSON.stringify({name: 'John'}));

// Recuperar dados do formulário
const step1 = JSON.parse(sessionStorage.getItem('formStep1'));

Como Escolher: Um Guia de Decisão

Use a seguinte lista ordenada para orientar sua decisão:

1. O servidor precisa ler os dados a cada requisição? Se sim, use cookies. Exemplo: IDs de sessão.
2. Os dados precisam persistir entre sessões do navegador? Se sim, use localStorage. Exemplo: preferências do usuário.
3. Os dados devem ser limitados a uma única aba? Se sim, use sessionStorage. Exemplo: dados de formulário de várias etapas.
4. Os dados são sensíveis? Evite armazená-los em localStorage ou sessionStorage. Use cookies HttpOnly para tokens e nunca armazene senhas.
5. Os dados são grandes? Cookies são limitados a ~4KB; localStorage e sessionStorage oferecem muito mais capacidade.

Melhores Práticas de Segurança

• Sempre valide e sanitize a entrada para prevenir XSS, que pode comprometer qualquer armazenamento do lado do cliente.
• Use cookies HttpOnly, Secure e SameSite para tokens de autenticação para mitigar XSS e CSRF.
• Evite armazenar dados sensíveis em localStorage ou sessionStorage. Se precisar, criptografe e use expiração curta.
• Implemente Content Security Policy (CSP) para reduzir riscos de XSS.
• Limpe regularmente dados obsoletos para evitar atingir limites de armazenamento e reduzir a exposição.

Perguntas Frequentes

Posso usar localStorage para tokens de autenticação?

Não é recomendado porque o localStorage é acessível via JavaScript, tornando os tokens vulneráveis a XSS. Prefira cookies HttpOnly com os atributos Secure e SameSite.

O que acontece com o sessionStorage quando duplico uma aba?

Quando você duplica uma aba, a nova aba recebe uma cópia do sessionStorage da aba original no momento da duplicação. Depois disso, elas são independentes.

Os cookies são enviados ao servidor em cada requisição?

Sim, os cookies do domínio atual são automaticamente incluídos em cada requisição HTTP, o que pode impactar o desempenho se você armazenar muitos dados. Use-os com moderação.

Precisa formatar ou validar rapidamente dados JSON que está armazenando? Experimente nosso JSON Formatter para embelezar e depurar seus payloads JSON antes de salvá-los no armazenamento do cliente.