Elemente auslesen, setzen und entfernen

Sowohl localStorage als auch sessionStorage stellen dieselben vier grundlegenden Methoden bereit: getItem(key), setItem(key, value), removeItem(key) und clear(). Sie sind einfache, vom Browser verwaltete Schlüssel-Wert-Speicher.

localStorage.setItem("theme", "dark") speichert eine Zeichenfolge unter dem Schlüssel "theme". Sowohl Schlüssel als auch Wert müssen Zeichenfolgen sein – Werte anderer Typen werden vor der Speicherung über String() in Zeichenfolgen umgewandelt, wodurch Objekte und Arrays unbemerkt beschädigt werden.

Um strukturierte Daten zu speichern, serialisieren Sie sie mit JSON: localStorage.setItem("user", JSON.stringify(user)). Lesen Sie sie anschließend wieder ein: const user = JSON.parse(localStorage.getItem("user")). Schließen Sie das Parsen immer in try/catch ein, falls der gespeicherte Wert fehlerhaft formatiert ist.

getItem("missing") gibt null zurück, wenn der Schlüssel nicht existiert – niemals undefined. Verwenden Sie den Nullish-Coalescing-Operator, um Standardwerte bereitzustellen: const theme = localStorage.getItem("theme") ?? "light".

Sie können auch die Klammer- und Punktschreibweise verwenden: localStorage.theme = "dark" und localStorage["theme"]. Beides funktioniert, verschleiert jedoch die Absicht – bevorzugen Sie die expliziten Methodenaufrufe, die klar vermitteln, dass es sich um persistenten Speicher und nicht um eine Objekteigenschaft handelt.

localStorage.removeItem("theme") löscht einen einzelnen Schlüssel. localStorage.clear() löscht alle Schlüssel für die aktuelle Origin. clear() ist destruktiv – rufen Sie die Methode niemals ohne triftigen Grund auf; sie entfernt Daten, die von jedem Skript auf der Seite gesetzt wurden.

Verwenden Sie localStorage.length und localStorage.key(index), um alle gespeicherten Schlüssel zu durchlaufen, oder nutzen Sie Object.keys(localStorage) mit Spread-Syntax. Dies ist nützlich für Migrationen, das Debugging und die präfixbasierte Bereinigung, etwa um alle Schlüssel zu entfernen, die mit "cache:" beginnen.

Browser stellen pro Origin ungefähr 5–10 MB bereit. Bei einer Überschreitung des Kontingents wird ein QuotaExceededError ausgelöst. Schließen Sie setItem in try/catch ein, wenn Sie potenziell große Werte wie Bild-Caches oder Dokumententwürfe speichern, damit der Fehler die Anwendung nicht zum Absturz bringt.

Der Speicher wird von der gesamten Origin gemeinsam verwendet. Präfixieren Sie Ihre Schlüssel mit dem Namen der Anwendung oder Funktion (app:settings, cart:items), um Kollisionen mit anderen Skripten, Drittanbieterbibliotheken und Browsererweiterungen auf derselben Origin zu vermeiden.

Die Storage API ist vollständig synchron – jeder Aufruf blockiert den Hauptthread, bis die Festplatten-E/A abgeschlossen ist. Vermeiden Sie das Speichern sehr großer Blobs oder Aufrufe von setItem in engen Schleifen; bündeln Sie Aktualisierungen stattdessen in einem einzigen serialisierten Objekt.

Dieselbe API, unterschiedliche Lebensdauer. sessionStorage wird beim Schließen des Tabs gelöscht; localStorage bleibt über Browser-Neustarts hinweg erhalten. Wählen Sie sessionStorage für kurzlebigen Status von Assistenten und localStorage für Benutzereinstellungen, die ein Neuladen überstehen sollen.

Was gibt localStorage.getItem("missing-key") zurück, wenn der Schlüssel noch nie gesetzt wurde?

getItem, setItem, removeItem und clear sind die vier Grundpfeiler von Web Storage. Werte sind immer Zeichenfolgen; verwenden Sie daher JSON für strukturierte Daten. Berücksichtigen Sie null-Rückgabewerte, QuotaExceededError und Namensräume, damit andere Skripte die Origin problemlos mitverwenden können.