JavaScript Academy · Aula

Eventos e limites de armazenamento

Reaja a alterações e respeite os limites de cota.

Eventos e limites de armazenamento é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 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.

Reagindo a alterações no armazenamento

O evento storage permite que uma aba reaja quando outra aba altera localStorage. Isso possibilita uma sincronização simples entre abas.

Escutando o armazenamento

Adicione um observador a window. Ele é acionado em OTHER abas da mesma origem sempre que localStorage muda, mas não na aba que fez a alteração.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

O objeto StorageEvent

O evento contém key, oldValue, newValue, storageArea e url. Juntos, eles descrevem exatamente o que mudou.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Dispara apenas em outras abas

Uma sutileza importante: o evento NÃO dispara na mesma aba que chamou setItem. Ele serve para notificar as outras abas; portanto, não dependa dele para atualizações na mesma aba.

Padrão de sincronização entre abas

Use o evento para manter as abas consistentes, por exemplo, desconectando o usuário de todos os lugares quando uma aba remove o token de autenticação.

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

Detectando clear()

Quando clear() é executado, o evento dispara com key definido como null. Trate esse caso para redefinir tudo.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

A cota de armazenamento

Cada origem recebe um limite restrito, geralmente de cerca de 5MB no total para localStorage. Isso é muito menos do que o IndexedDB oferece, portanto armazene apenas quantidades moderadas.

Erros de cota excedida

Exceder a cota gera um QuotaExceededError em setItem. Envolva sempre gravações grandes ou não confiáveis em um bloco de tratamento de erros.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 duplica a contagem

As cadeias de caracteres são armazenadas como UTF-16, portanto cada caractere usa aproximadamente 2 octetos. Uma cota de 5MB comporta cerca de 2,5 milhões de caracteres, e menos no caso de texto não ASCII.

Estimando o uso

É possível medir aproximadamente o uso somando os comprimentos das chaves e dos valores. Não existe uma API exata, mas isso fornece uma estimativa útil.

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

Quando usar algo maior

Para dados grandes ou estruturados que ultrapassem alguns MB, recorra ao IndexedDB. O Armazenamento Web é mais adequado para sinalizadores, preferências e tokens pequenos.

Verificação rápida

Eventos e limites de armazenamento.

Recapitulação

O evento storage notifica OTHER abas de uma origem sobre alterações em localStorage, transportando key, oldValue e newValue (key é null quando ocorre clear()). As cotas são de aproximadamente 5MB, e escrever além delas gera um QuotaExceededError; por isso, envolva gravações arriscadas em um bloco de tratamento de erros e use IndexedDB para dados maiores.

Perguntas Frequentes

A aula “Eventos e limites de armazenamento” é grátis?

Sim — o texto completo de “Eventos e limites de armazenamento” é 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 “Eventos e limites de armazenamento”?

Reaja a alterações e respeite os limites de cota. 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 4 de 4.

Quanto tempo leva a aula “Eventos e limites de armazenamento”?

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