Lendo e gravando no localStorage com React

localStorage é um armazenamento integrado do navegador com quatro métodos principais: setItem(key, value), getItem(key), removeItem(key) e clear(). Os dados persistem após recarregamentos da página e reinicializações do navegador.

Ele pertence ao objeto da janela e tem escopo por origem, o que significa que cada domínio possui seu próprio armazenamento isolado.

Cada chamada a localStorage é executada de forma síncrona na linha principal de execução. Ler ou gravar grandes quantidades de dados pode bloquear a renderização e fazer a interface parecer travada.

Por isso, mantenha os valores armazenados pequenos e evite gravar a cada tecla digitada ou evento de rolagem.

localStorage só pode armazenar cadeias de caracteres. Para armazenar um objeto ou uma matriz, primeiro você precisa serializá-los com JSON.stringify(value) antes de chamar setItem.

Se você armazenar diretamente um valor que não seja uma cadeia de caracteres, ele será convertido; assim, um objeto se torna a cadeia inútil [object Object].

Ao ler, você chama JSON.parse(localStorage.getItem(key)), mas a interpretação pode gerar um erro se a cadeia armazenada estiver corrompida ou tiver sido gravada por outra origem.

Envolva a interpretação em um try/catch e use um valor padrão como alternativa para que uma entrada inválida não faça seu componente falhar.

localStorage nem sempre pode ser usado: durante a renderização no servidor, window não existe, e alguns modos de navegação privada geram um erro ao gravar. Proteja o acesso com uma verificação de suporte.

Um teste seguro é um try/catch que define e remove uma chave fictícia, retornando falso se ocorrer um erro.

A maioria dos navegadores limita o localStorage a aproximadamente cinco megabytes por origem. Exceder esse limite lança um QuotaExceededError ao gravar.

Isso torna o localStorage adequado para dados pequenos, mas uma opção ruim para imagens, grandes conjuntos de dados ou respostas de API armazenadas em cache.

Boas opções são partes pequenas e não confidenciais da interface e do estado do usuário: preferência de tema, estado recolhido da barra lateral, filtros usados por último, banners dispensados e rascunhos de formulários não salvos.

Esses são valores que você deseja preservar após um recarregamento, mas que não precisam de uma ida e volta ao servidor.

Evite armazenar segredos, como tokens ou senhas, porque qualquer script na página pode ler o localStorage, tornando-o vulnerável a XSS. Evite também objetos grandes e o estado oficial do servidor.

Os dados confidenciais de autenticação devem ficar em cookies httpOnly, e os dados canônicos devem ficar no servidor.

Ambos compartilham a mesma interface, mas o sessionStorage é limpo quando a aba é fechada e não é compartilhado entre abas. O localStorage persiste indefinidamente e é compartilhado entre todas as abas da mesma origem.

Escolha sessionStorage para dados de curta duração específicos da aba e localStorage para preferências duradouras.

Os cookies são pequenos e enviados com cada requisição HTTP, o que é adequado para autenticação, mas desperdiça largura de banda com dados gerais. O IndexedDB é um banco de dados assíncrono para dados grandes e estruturados, muito além do limite de 5 MB.

Escolha cookies para autenticação lida pelo servidor, localStorage para pequenas preferências no cliente e IndexedDB para dados grandes ou complexos.

Um auxiliar mínimo grava com localStorage.setItem(key, JSON.stringify(value)) e lê com um try/catch protegido em torno de JSON.parse(localStorage.getItem(key)), retornando um valor padrão em caso de falha.

Esse pequeno invólucro mantém a serialização e o tratamento de erros em um só lugar.

Teste sua compreensão dos tipos de dados do localStorage.

Você aprendeu a interface do localStorage, que ele é síncrono, aceita apenas strings e é limitado a cerca de 5 MB, além de ter aprendido a analisar dados com segurança e verificar a disponibilidade para SSR e o modo privado.

Você também o comparou com sessionStorage, cookies e IndexedDB para escolher o armazenamento adequado.