JavaScript Academy · Lezione

Eventi e limiti dello storage

Reagisca alle modifiche e rispetti i limiti di quota.

Eventi e limiti dello storage è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Reagire alle modifiche dello storage

L'evento storage consente a una scheda di reagire quando un'altra scheda modifica localStorage. Permette una semplice sincronizzazione tra schede.

Ascoltare l'evento storage

Aggiunga un listener su window. Viene attivato nelle ALTRE schede della stessa origine ogni volta che cambia localStorage, ma non nella scheda che ha effettuato la modifica.

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

L'oggetto StorageEvent

L'evento contiene key, oldValue, newValue, storageArea e url. Insieme descrivono esattamente che cosa è cambiato.

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

Si attiva solo nelle altre schede

Una sottigliezza importante: l'evento NON viene attivato nella stessa scheda che ha chiamato setItem. Serve a notificare le altre schede, quindi non faccia affidamento su di esso per gli aggiornamenti nella stessa scheda.

Schema di sincronizzazione tra schede

Utilizzi l'evento per mantenere coerenti le schede, ad esempio disconnettendo l'utente ovunque quando una scheda elimina il token di autenticazione.

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

Rilevare clear()

Quando viene eseguito clear(), l'evento viene attivato con key impostato su null. Gestisca questo caso per reimpostare tutto.

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

La quota di storage

A ogni origine viene assegnata una quantità limitata, generalmente circa 5 MB complessivi per localStorage. È molto meno rispetto a IndexedDB, quindi memorizzi solo quantità moderate di dati.

Errori di superamento della quota

Il superamento della quota genera un QuotaExceededError con setItem. Racchiuda sempre le scritture di grandi dimensioni o non attendibili in try/catch.

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

UTF-16 raddoppia il conteggio

Le stringhe vengono memorizzate come UTF-16, quindi ogni carattere occupa circa 2 byte. Una quota di 5 MB contiene circa 2,5 milioni di caratteri, e ancora meno se il testo non è ASCII.

Stimare l'utilizzo

Può misurare approssimativamente l'utilizzo sommando le lunghezze delle chiavi e dei valori. Non esiste un'API precisa, ma questa stima è utile.

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 utilizzare qualcosa di più capiente

Per dati di grandi dimensioni o strutturati, oltre pochi MB, utilizzi IndexedDB. Web Storage è ideale per piccoli flag, preferenze e token.

Verifica rapida

Eventi e limiti dello storage.

Riepilogo

L'evento storage notifica alle ALTRE schede di un'origine le modifiche a localStorage e contiene key, oldValue e newValue (key è null dopo clear()). Le quote sono di circa 5 MB e una scrittura oltre il limite genera QuotaExceededError; racchiuda quindi le scritture rischiose in try/catch e utilizzi IndexedDB per i dati più voluminosi.

Domande Frequenti

La lezione «Eventi e limiti dello storage» è gratuita?

Sì — il testo completo di «Eventi e limiti dello storage» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Eventi e limiti dello storage»?

Reagisca alle modifiche e rispetti i limiti di quota. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Eventi e limiti dello storage»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy