Armazenamento no navegador: comparação entre cookies, Web Storage e IndexedDB

O que é

Cookies são pares nome-valor definidos pelo servidor (Set-Cookie) ou por script e enviados de volta em cada requisição correspondente. A RFC 6265 pede que os user agents suportem pelo menos 4096 bytes por cookie, 50 cookies por domínio e 3000 no total, e permite que eles descartem cookies que excedam esses limites. O Web Storage (padrão HTML) oferece o localStorage, que persiste por origem, e o sessionStorage, que fica restrito a um top-level traversable (uma aba ou janela) e termina junto com ele; ambos são síncronos e armazenam apenas strings. A página de cotas da MDN informa que o Web Storage é limitado a 10 MiB no total, sendo 5 MiB de armazenamento local e 5 MiB de sessão por origem, e que exceder esse limite lança QuotaExceededError. O IndexedDB é assíncrono e transacional, armazena valores estruturados e blobs com índices, e usa a cota geral da origem, que em navegadores baseados em Chromium pode chegar a 60% do disco. Por padrão, o armazenamento é best-effort e pode ser descartado sob pressão de espaço; navigator.storage.persist() solicita persistência, navigator.storage.estimate() informa uso e cota, e a navegação privada costuma descartar os dados quando a sessão termina.

Por que importa

A escolha errada gera problemas de segurança ou de confiabilidade: um token de sessão no localStorage pode ser lido por qualquer script injetado, um estado grande em cookies incha todas as requisições, uma gravação volumosa e síncrona no localStorage bloqueia a thread principal, e uma aplicação que presume que dados best-effort sempre estarão lá falha silenciosamente após o descarte.

Como aplicar

• Dados de que o servidor precisa em cada requisição (identificador de sessão): um cookie pequeno com HttpOnly, Secure e escopo de caminho; nada além disso vai em cookies.
• Preferências pequenas, só do cliente: localStorage, com cada acesso envolvido em try/catch, porque ele pode lançar exceção quando estiver cheio ou bloqueado.
• Estado transitório por aba (progresso de um assistente, filtros de rascunho): sessionStorage.
• Registros, arquivos, caches offline: IndexedDB, por trás de um wrapper pequeno para que o restante do código lide com promises.
• Versione o formato dos dados armazenados (settings:v2) e migre ou descarte em caso de incompatibilidade.
• Antes de depender do armazenamento para dados críticos, chame persist() e trate uma recusa como "pode desaparecer".

Armadilhas

O armazenamento é por origem: app.example.com e example.com não compartilham localStorage, enquanto um cookie com Domain=example.com é enviado a ambos, e cookies não isolam por porta. Os navegadores ainda podem particionar o armazenamento de um site incorporado em frames de terceiros. JSON.stringify descarta undefined e converte Date em strings; desserialize de forma deliberada.