localStorage versus sessionStorage

A API de armazenamento da Web fornece dois armazenamentos de pares de chave e valor no lado do cliente: localStorage (persistente entre sessões) e sessionStorage (limpo quando a aba é fechada). Ambos armazenam valores de texto e podem ser acessados de forma síncrona por meio de JavaScript na mesma origem.

Os dados em localStorage persistem até serem explicitamente apagados pelo código, pelo usuário ou pela exclusão de dados do navegador. Eles sobrevivem a reinicializações do navegador, atualizações da página e fechamentos de abas. A capacidade normalmente é de 5 a 10 MB por origem, dependendo do navegador.

O sessionStorage é limitado à aba e à sessão atuais do navegador. Os dados sobrevivem às atualizações da página dentro da mesma aba, mas são apagados quando a aba é fechada. Duas abas do mesmo site têm sessionStorage separado e isolado — elas não compartilham dados.

Ambos os armazenamentos compartilham a mesma API: setItem(key, value), getItem(key), removeItem(key), clear() e a propriedade length. O mesmo código funciona para ambos — basta substituir localStorage por sessionStorage e vice-versa.

Use localStorage para: preferências do usuário (tema, idioma), respostas de API armazenadas em cache e funcionalidade de manter a sessão. Use sessionStorage para: estado da etapa de assistentes ou formulários, carrinho de compras temporário antes da finalização da compra e dados que não devem persistir entre visitas por motivos de privacidade.

Ambos os armazenamentos são estritamente limitados à origem (protocolo + endereço + porta). https://example.com não pode ler o localStorage definido por http://example.com. Esse é um limite de segurança — os subdomínios também são origens separadas, a menos que document.domain seja alterado (obsoleto).

Ambos têm um limite de aproximadamente 5 MB por origem na maioria dos navegadores. Exceder o limite gera um QuotaExceededError. Necessidades de armazenamento de grandes volumes de dados exigem IndexedDB, que oferece suporte a gigabytes de dados estruturados. O armazenamento da Web é destinado a pequenos pares de chave e valor, não a blocos binários nem a grandes conjuntos de dados.

As leituras e gravações no armazenamento da Web são síncronas e bloqueiam a thread principal. Em leituras ou gravações grandes, isso pode causar travamentos. Prefira IndexedDB para operações frequentes com grandes volumes de dados. Mantenha pequenos e pouco frequentes os valores do armazenamento da Web para evitar problemas de desempenho.

O armazenamento da Web armazena apenas textos. Serialize objetos com JSON.stringify(); desserialize-os com JSON.parse(). Trate falhas de análise: try { return JSON.parse(stored) } catch { return defaultValue }. Valores corrompidos ou que não estejam no formato JSON no armazenamento geram erros de análise.

O localStorage no modo privado/anônimo é apagado quando todas as janelas privadas são fechadas — comportando-se como o sessionStorage. O código que depende do localStorage para o estado de autenticação deve lidar com a possibilidade de o localStorage ser apagado inesperadamente.

Os navegadores restringem cada vez mais o acesso ao armazenamento de terceiros. Um quadro incorporado de um terceiro em um site primário não pode acessar o localStorage do terceiro. O ITP do Safari e a Proteção Aprimorada contra Rastreamento do Firefox particionam o armazenamento — o uso como primeira parte não é afetado.

Quando o sessionStorage é apagado?

O localStorage persiste indefinidamente até ser apagado programaticamente ou pelo usuário; o sessionStorage é apagado quando a aba é fechada. Ambos são armazenamentos síncronos de pares de chave e valor em texto, limitados à origem, com capacidade de aproximadamente 5 MB. Use localStorage para preferências e estado persistente; use sessionStorage para estado temporário, limitado à sessão, que não deve sobreviver ao fechamento da aba.