Obtendo, definindo e removendo itens

Tanto localStorage quanto sessionStorage expõem os mesmos quatro métodos principais: getItem(key), setItem(key, value), removeItem(key) e clear(). Eles são simples armazenamentos de pares de chave e valor mantidos pelo navegador.

localStorage.setItem("theme", "dark") persiste um texto sob a chave "theme". Tanto a chave quanto o valor devem ser textos — valores que não sejam textos são convertidos antes do armazenamento, o que corrompe silenciosamente objetos e matrizes.

Para armazenar dados estruturados, serialize-os com JSON: localStorage.setItem("user", JSON.stringify(user)). Leia-os novamente: const user = JSON.parse(localStorage.getItem("user")). Sempre envolva a análise em um bloco de tratamento de erros caso o valor armazenado esteja malformado.

getItem("missing") retorna null quando a chave não existe — nunca undefined. Use o operador de coalescência nula para fornecer valores padrão: const theme = localStorage.getItem("theme") ?? "light".

Você também pode usar a notação de colchetes e de ponto: localStorage.theme = "dark" e localStorage["theme"]. Ambas funcionam, mas ocultam a intenção — prefira as chamadas explícitas de métodos, que comunicam claramente que se trata de armazenamento persistente, e não de uma propriedade de objeto.

localStorage.removeItem("theme") exclui uma única chave. localStorage.clear() apaga todas as chaves da origem atual. clear() é destrutivo — nunca o chame sem um motivo forte; ele remove os dados definidos por todos os scripts da página.

Use localStorage.length e localStorage.key(index) para percorrer todas as chaves armazenadas ou espalhe Object.keys(localStorage). Isso é útil para migrações, depuração e limpeza baseada em prefixos, como remover todas as chaves que começam com "cache:".

Os navegadores alocam aproximadamente de 5 a 10 MB por origem. Exceder a cota gera um QuotaExceededError. Envolva setItem em um bloco de tratamento de erros ao armazenar valores potencialmente grandes, como caches de imagens ou rascunhos de documentos, para que o erro não encerre inesperadamente o aplicativo.

O armazenamento é compartilhado por toda a origem. Prefixe suas chaves com o nome do aplicativo ou do recurso (app:settings, cart:items) para evitar conflitos com outros scripts, bibliotecas de terceiros e extensões do navegador em execução na mesma origem.

A API de armazenamento é totalmente síncrona — cada chamada bloqueia a thread principal até que a entrada e saída do disco seja concluída. Evite armazenar blocos muito grandes ou chamar setItem dentro de laços apertados; agrupe as atualizações em um único objeto serializado.

A mesma superfície de API, mas com duração diferente. O sessionStorage é apagado quando a aba é fechada; o localStorage persiste entre reinicializações do navegador. Escolha sessionStorage para o estado temporário de um assistente e localStorage para preferências do usuário que devem sobreviver a uma atualização.

O que localStorage.getItem("missing-key") retorna quando a chave nunca foi definida?

getItem, setItem, removeItem e clear são os quatro pilares do armazenamento da Web. Os valores são sempre textos, portanto envolva os dados estruturados com JSON. Prepare-se para retornos null, QuotaExceededError e organização por espaços de nomes, compartilhando educadamente a origem com outros scripts.