Teste o localStorage em um playground ao vivo e copie exemplos que funcionam para preferências salvas, um carrinho e um tema, além de JSON, limites de tamanho, erros e sincronização entre abas.
O localStorage é um armazenamento de chave e valor por origem no navegador que mantém os dados depois que a aba e o navegador são fechados. Você chama setItem(key, value) para salvar, getItem(key) para ler, removeItem(key) para apagar e clear() para esvaziar. Os valores são sempre strings, então envolva objetos com JSON.stringify e JSON.parse.
Toda a Storage API em um cartão
A maioria dos bugs com localStorage vem de três surpresas: tudo vira string, a chamada pode lançar um erro e os dados ficam presos a uma origem exata. O playground abaixo grava no seu próprio navegador para você ver essas regras acontecendo, e depois os exemplos mostram padrões seguros para preferências, um carrinho de compras e uma troca de tema.
O MDN documenta um limite de 5 MiB de localStorage por origem nos navegadores atuais, com outros 5 MiB separados para o sessionStorage. As strings são armazenadas em UTF-16, então o número de caracteres que cabe é menor do que a contagem de bytes sugere. Gravar além do limite lança um QuotaExceededError.
Não. As entradas ficam até o seu código removê-las ou o visitante limpar os dados do site. Em uma janela anônima, o navegador as apaga quando a última aba anônima é fechada. Se você precisa de expiração, guarde um timestamp junto do valor e confira na leitura.
setItem transforma em string tudo o que você passa. Um objeto simples vira o texto [object Object] e os dados se perdem. Salve JSON.stringify(obj) e leia de volta com JSON.parse.
Não. O storage pertence a uma origem, que é o esquema, o host e a porta juntos. http://example.com e https://example.com têm cada um o próprio storage separado, e o mesmo vale para subdomínios.
Escute o evento storage no window. Ele dispara nos outros documentos abertos da mesma origem quando um deles altera um valor, e traz key, oldValue e newValue. A aba que fez a mudança não o recebe.
Cookies vão para o servidor a cada requisição e servem para sessões. O localStorage nunca sai do navegador, comporta mais e serve para estado da interface, como um tema, um rascunho ou uma barra lateral recolhida.
Escolha o armazenamento por quanto tempo os dados devem durar e quem precisa deles
Um único lugar trata storage bloqueado, cota cheia e JSON quebrado, para que o resto do seu código nunca precise tratar.
Os padrões são mesclados com o que foi salvo, então adicionar uma nova configuração depois não quebra dados salvos antigos.
Cada mudança cria um novo array e o grava de volta. O servidor continua decidindo os preços no checkout.
Se nada foi salvo, vale a configuração do sistema operacional. Rode isso cedo no head para evitar um flash do tema errado.
O localStorage não tem expiração nativa, então guarde o prazo junto do valor e descarte entradas vencidas na leitura.
O evento storage chega a todas as outras abas da mesma origem, então um contador do carrinho pode ser atualizado sem reload.
O storage está bloqueado neste navegador, então toda chamada lançaria um erro. Seu código precisa de um fallback.
Lançou {name}: {message}
Digite uma chave primeiro.
{call} armazenou {n} caracteres.
{call} retornou null: não existe entrada com essa chave.
JSON.parse devolveu: {value}
O texto armazenado não é JSON: {value}
{call} retornou a string {value}
{call} concluído.
{n} entradas do playground removidas. As outras chaves deste site não foram tocadas.
Salve, leia e apague entradas no seu próprio navegador e veja todas as chaves que este site armazena. As chaves do playground começam com demo: para nunca conflitarem com as do site.
Chave
Valor
Tipo de valor
String simples
Objeto (JSON)
Salvar
Ler
Apagar
Limpar chaves do playground
Os resultados aparecem aqui.
Entradas do playground armazenadas no seu navegador ({n})
String armazenada
Comece grátis · Sem cartão de crédito