localStorage in React lesen und schreiben

localStorage ist ein integrierter Browserspeicher mit vier zentralen Methoden: setItem(key, value), getItem(key), removeItem(key) und clear(). Die Daten bleiben über Seitenaktualisierungen und Neustarts des Browsers hinweg erhalten.

Der Speicher befindet sich im window-Objekt und ist auf den Ursprung beschränkt. Das bedeutet, dass jede Domain über einen eigenen, isolierten Speicher verfügt.

Jeder Aufruf von localStorage läuft synchron im Hauptthread. Das Lesen oder Schreiben großer Datenmengen kann das Rendern blockieren und die Benutzeroberfläche ruckelig wirken lassen.

Halten Sie gespeicherte Werte deshalb klein und vermeiden Sie Schreibvorgänge bei jedem Tastendruck oder Scroll-Ereignis.

localStorage kann nur Zeichenketten speichern. Um ein Objekt oder Array zu speichern, müssen Sie es zunächst mit JSON.stringify(value) serialisieren, bevor Sie setItem aufrufen.

Wenn Sie direkt einen Wert speichern, der keine Zeichenkette ist, wird er in eine Zeichenkette umgewandelt. Aus einem Objekt wird dann die nutzlose Zeichenkette [object Object].

Beim Lesen rufen Sie JSON.parse(localStorage.getItem(key)) auf. Das Parsen kann jedoch einen Fehler auslösen, wenn die gespeicherte Zeichenkette beschädigt ist oder von einer anderen Quelle geschrieben wurde.

Schließen Sie das Parsen in ein try/catch ein und verwenden Sie einen Standardwert als Fallback, damit ein fehlerhafter Eintrag Ihre Komponente nicht zum Absturz bringt.

localStorage ist nicht immer nutzbar: Beim serverseitigen Rendern existiert window nicht, und einige Modi für privates Surfen lösen beim Schreiben einen Fehler aus. Sichern Sie den Zugriff mit einer Feature-Prüfung ab.

Ein sicherer Test besteht aus einem try/catch, das einen Dummy-Schlüssel setzt und entfernt und bei einem Fehler false zurückgibt.

Die meisten Browser begrenzen localStorage pro Origin auf ungefähr fünf Megabyte. Wird dieses Limit beim Schreiben überschritten, wird ein QuotaExceededError ausgelöst.

Damit eignet sich localStorage für kleine Datenmengen, ist aber keine gute Wahl für Bilder, große Datensätze oder zwischengespeicherte API-Antworten.

Geeignet sind kleine, nicht sensible Bestandteile der UI und des Benutzerzustands: die Theme-Präferenz, der Status einer eingeklappten Seitenleiste, zuletzt verwendete Filter, ausgeblendete Banner und ungespeicherte Formularentwürfe.

Diese Werte sollen einen Reload überstehen, benötigen aber keinen Roundtrip zum Server.

Vermeiden Sie das Speichern von Geheimnissen wie Tokens oder Passwörtern, da jedes Skript auf der Seite localStorage lesen kann und die Daten dadurch für XSS-Angriffe anfällig sind. Vermeiden Sie außerdem große Objekte und maßgebliche Serverdaten.

Sensible Authentifizierungsdaten gehören in httpOnly-Cookies, und die maßgeblichen Daten gehören auf den Server.

Beide verwenden dieselbe API, aber sessionStorage wird beim Schließen des Tabs geleert und nicht zwischen Tabs geteilt. localStorage bleibt dauerhaft erhalten und wird von allen Tabs desselben Origins gemeinsam genutzt.

Wählen Sie sessionStorage für kurzlebige, tabbezogene Daten und localStorage für dauerhafte Präferenzen.

Cookies sind klein und werden mit jeder HTTP-Anfrage gesendet. Das eignet sich für Authentifizierung, verschwendet aber bei allgemeinen Daten Bandbreite. IndexedDB ist eine asynchrone Datenbank für große, strukturierte Datenmengen, die weit über das 5-MB-Limit hinausgehen.

Verwenden Sie Cookies für serverseitig gelesene Authentifizierungsdaten, localStorage für kleine Client-Präferenzen und IndexedDB für große oder komplexe Daten.

Eine minimale Hilfsfunktion schreibt mit localStorage.setItem(key, JSON.stringify(value)) und liest mit einem abgesicherten try/catch um JSON.parse(localStorage.getItem(key)); bei einem Fehler gibt sie einen Standardwert zurück.

Dieser kleine Wrapper bündelt Serialisierung und Fehlerbehandlung an einer Stelle.

Testen Sie Ihr Verständnis der Datentypen von localStorage.

Sie haben die localStorage-API kennengelernt: Sie ist synchron, verarbeitet ausschließlich Zeichenketten und ist auf etwa 5 MB begrenzt. Außerdem haben Sie gelernt, wie Sie Daten sicher parsen und die Verfügbarkeit für SSR und den privaten Modus prüfen.

Zusätzlich haben Sie localStorage mit sessionStorage, Cookies und IndexedDB verglichen, um den passenden Speicher auszuwählen.