JavaScript Academy · Lektion

Storage-Ereignisse und -Limits

Reagieren Sie auf Änderungen und halten Sie Kontingentgrenzen ein.

Storage-Ereignisse und -Limits ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Auf Speicheränderungen reagieren

Das storage-Ereignis ermöglicht es einem Tab, zu reagieren, wenn ein anderer Tab localStorage ändert. Damit wird eine einfache tabübergreifende Synchronisierung möglich.

Auf storage lauschen

Fügen Sie einen Listener auf window hinzu. Er wird in ANDEREN Tabs derselben Origin ausgelöst, sobald sich localStorage ändert, nicht in dem Tab, der die Änderung vorgenommen hat.

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

Das StorageEvent-Objekt

Das Ereignis enthält key, oldValue, newValue, storageArea und url. Zusammen beschreiben sie genau, was sich geändert hat.

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

Wird nur in anderen Tabs ausgelöst

Ein wichtiges Detail: Das Ereignis wird NICHT in demselben Tab ausgelöst, der setItem aufgerufen hat. Es soll die anderen Tabs benachrichtigen. Verlassen Sie sich daher nicht darauf, um Aktualisierungen im selben Tab zu verarbeiten.

Muster zur tabübergreifenden Synchronisierung

Verwenden Sie das Ereignis, um den Zustand in mehreren Tabs konsistent zu halten, etwa indem Sie den Benutzer überall abmelden, sobald ein Tab das Authentifizierungstoken löscht.

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

clear() erkennen

Wenn clear() ausgeführt wird, wird das Ereignis mit key gleich null ausgelöst. Behandeln Sie diesen Fall, um alles zurückzusetzen.

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

Das Speicherkontingent

Jede Origin erhält ein begrenztes Kontingent, üblicherweise insgesamt etwa 5MB für localStorage. Das ist deutlich weniger als bei IndexedDB. Speichern Sie daher nur moderate Datenmengen.

Fehler bei überschrittenem Kontingent

Wird das Kontingent überschritten, löst setItem einen QuotaExceededError aus. Wickeln Sie große oder nicht vertrauenswürdige Schreibvorgänge immer in try/catch ein.

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

UTF-16 zählt doppelt

Zeichenketten werden als UTF-16 gespeichert, daher benötigt jedes Zeichen ungefähr 2 Byte. Ein Kontingent von 5MB reicht für etwa 2,5 Millionen Zeichen, bei Nicht-ASCII-Text für weniger.

Nutzung schätzen

Sie können die Nutzung grob messen, indem Sie die Längen aller Schlüssel und Werte addieren. Es gibt keine exakte API, aber damit erhalten Sie eine brauchbare Schätzung.

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");

Wann Sie etwas Größeres verwenden sollten

Für große oder strukturierte Datenmengen von mehr als einigen MB sollten Sie zu IndexedDB greifen. Web Storage eignet sich am besten für kleine Flags, Einstellungen und Tokens.

Kurzer Check

Speicherereignisse und Speichergrenzen.

Zusammenfassung

Das storage-Ereignis benachrichtigt ANDERE Tabs einer Origin über Änderungen an localStorage. Es enthält key, oldValue und newValue> (bei clear ist key gleich null). Das Kontingent beträgt ungefähr 5MB. Schreibvorgänge darüber hinaus lösen QuotaExceededError aus. Wickeln Sie riskante Schreibvorgänge daher in try/catch ein und verwenden Sie IndexedDB für größere Datenmengen.

`Häufig gestellte Fragen`

`Ist die Lektion „Storage-Ereignisse und -Limits“ kostenlos?`

Ja — der vollständige Text von „Storage-Ereignisse und -Limits“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

`Was lerne ich in „Storage-Ereignisse und -Limits“?`

Reagieren Sie auf Änderungen und halten Sie Kontingentgrenzen ein. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

`Brauche ich Erfahrung, um JavaScript Academy zu starten?`

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

`Wie lange dauert die Lektion „Storage-Ereignisse und -Limits“?`

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

`Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?`

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

← ZurückObjekte mit JSON speichern

`Alle Lektionen in diesem Kurs`

← Zurück zu JavaScript Academy