JavaScript Academy · Aula

localStorage versus sessionStorage

Escolha a duração de armazenamento adequada.

localStorage versus sessionStorage é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Dois armazenamentos, a mesma API

localStorage e sessionStorage compartilham métodos idênticos. A diferença está no tempo de vida: por quanto tempo os dados permanecem.

localStorage é persistente

Os dados em localStorage permanecem até serem removidos explicitamente. Eles sobrevivem a recarregamentos da página, fechamentos de abas e reinicializações do navegador.

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

sessionStorage é temporário

Os dados em sessionStorage duram apenas durante a sessão da aba. Fechar a aba os apaga.

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

Isolamento por aba

Cada aba do navegador recebe seu próprio sessionStorage. Duas abas do mesmo site têm armazenamentos de sessão separados; elas NÃO compartilham dados.

localStorage é compartilhado

Em contrapartida, todas as abas e janelas da mesma origem compartilham um único localStorage. Uma gravação em uma aba fica visível nas outras.

Comportamento ao recarregar

Um recarregamento normal mantém o sessionStorage daquela aba. Duplicar uma aba pode copiar a sessão, mas abrir uma aba nova começa com o armazenamento vazio.

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

Escolhendo entre os dois

Use localStorage para preferências duradouras (tema, idioma). Use sessionStorage para estados temporários específicos da aba (uma etapa de um assistente ou um rascunho de formulário usado uma única vez).

Cuidado com a segurança

Nenhum dos dois armazenamentos é seguro. Ambos podem ser lidos por qualquer script na página; portanto, nunca armazene senhas ou tokens confidenciais que precisem permanecer privados.

Os mesmos métodos em todos os lugares

Como as APIs são iguais, você pode trocar uma pela outra alterando apenas o nome do objeto. O código escrito para uma funciona com a outra.

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

Navegação privada

Nos modos privado ou anônimo, geralmente os dois armazenamentos são apagados quando a sessão termina, e alguns navegadores os limitam ou desativam. Sempre trate a possibilidade de uma gravação falhar.

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

A cota é separada

Cada armazenamento tem sua própria cota (geralmente cerca de 5 MB por origem). Preencher o sessionStorage não consome o limite do localStorage.

Verificação rápida

Comparando os dois armazenamentos.

Recapitulação

Os dois armazenamentos compartilham a mesma API, mas diferem no tempo de vida. O localStorage persiste entre sessões e é compartilhado por todas as abas de uma origem; o sessionStorage existe apenas durante a sessão de uma aba e é isolado por aba. Nenhum dos dois é seguro, e cada um tem sua própria cota de aproximadamente 5 MB.

Perguntas Frequentes

A aula “localStorage versus sessionStorage” é grátis?

Sim — o texto completo de “localStorage versus sessionStorage” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “localStorage versus sessionStorage”?

Escolha a duração de armazenamento adequada. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “localStorage versus sessionStorage”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy