sessionStorage, IndexedDB e escolha da API certa

O sessionStorage expõe exatamente os mesmos métodos que o localStorage, mas sua duração está vinculada à aba. Quando a aba ou a janela é fechada, seus dados são limpos automaticamente.

Ele também é isolado por aba, portanto duas abas não compartilham dados do sessionStorage.

O sessionStorage é ideal para um assistente de várias etapas no qual você deseja preservar o progresso após recarregamentos durante a sessão, mas descartá-lo quando a aba for fechada.

O usuário pode atualizar a página no meio do formulário sem perder os dados preenchidos, mas nada permanece depois que ele termina ou sai.

O IndexedDB é um banco de dados assíncrono e transacional integrado ao navegador. Ele pode armazenar muito mais que o limite de 5 MB do localStorage e lida com objetos estruturados, matrizes e até dados binários.

Por ser assíncrono, ele não bloqueia a linha de execução principal como o localStorage.

A interface bruta do IndexedDB é detalhada e baseada em eventos, portanto bibliotecas como idb-keyval a encapsulam em funções simples baseadas em promessas, como get, set e del.

Isso oferece uma ergonomia semelhante à do localStorage, com a capacidade do IndexedDB e comportamento assíncrono.

Como o IndexedDB pode armazenar valores Blob e ArrayBuffer, ele é ideal para armazenar em cache imagens, áudio, arquivos baixados ou recursos off-line.

Esses dados ultrapassariam rapidamente os limites do localStorage e teriam de ser serializados como strings, algo que o IndexedDB evita.

A interface Cache, frequentemente usada com agentes de serviço, armazena objetos completos de Response HTTP indexados pela requisição. Ela foi projetada especificamente para armazenar em cache respostas de rede priorizando o funcionamento off-line.

Use-a para fornecer recursos e respostas de API sem acessar a rede quando estiver off-line.

O localStorage persiste indefinidamente até ser limpo, o sessionStorage dura apenas durante a sessão da aba, o IndexedDB persiste indefinidamente e os cookies têm expiração configurável por meio de seus atributos.

Combinar a duração necessária com o armazenamento adequado evita surpresas sobre quando os dados desaparecem.

localStorage e sessionStorage são limitados a aproximadamente 5 MB, os cookies a cerca de 4 KB cada, enquanto IndexedDB pode usar centenas de megabytes ou mais, dependendo do dispositivo e do navegador.

Para qualquer coisa de tamanho considerável, IndexedDB é a única opção prática no navegador.

localStorage, sessionStorage e os cookies são síncronos e bloqueiam a linha de execução principal durante o acesso. IndexedDB e a API Cache são assíncronos e baseados em promessas.

O acesso assíncrono mantém a interface responsiva mesmo ao ler ou gravar grandes quantidades de dados.

Use cookies httpOnly para tokens de autenticação, para que os scripts não possam lê-los; localStorage para pequenas preferências persistentes; IndexedDB para arquivos grandes e dados offline complexos; e sessionStorage para rascunhos de curta duração dentro de uma aba.

Escolha o armazenamento de acordo com a sensibilidade, o tamanho e a duração dos dados.

Não existe uma única API de armazenamento melhor em todos os casos; cada uma faz concessões entre capacidade, persistência, comportamento síncrono e segurança. Conhecer as diferenças permite que você escolha conscientemente.

Um aplicativo típico usa várias: cookies para autenticação, localStorage para preferências e IndexedDB para recursos offline.

Teste sua compreensão das opções de armazenamento.

Você comparou sessionStorage, localStorage, IndexedDB, cookies e a API Cache em relação à persistência, à capacidade, ao comportamento síncrono e à segurança.

Você aprendeu a escolher de acordo com o caso de uso: cookies para autenticação, localStorage para pequenas preferências, IndexedDB para dados grandes ou complexos e sessionStorage para rascunhos restritos à aba.