localStorage gegenüber sessionStorage

Die Web Storage API stellt zwei clientseitige Schlüssel-Wert-Speicher bereit: localStorage (über Sitzungen hinweg persistent) und sessionStorage (wird beim Schließen des Tabs gelöscht). Beide speichern Zeichenfolgen und sind über JavaScript synchron auf derselben Origin zugänglich.

Daten in localStorage bleiben erhalten, bis sie ausdrücklich durch Code, den Benutzer oder das Löschen von Browserdaten entfernt werden. Sie überstehen Browser-Neustarts, das Aktualisieren von Seiten und das Schließen von Tabs. Die Kapazität beträgt je nach Browser typischerweise 5–10 MB pro Origin.

sessionStorage ist auf den aktuellen Browser-Tab und die aktuelle Sitzung beschränkt. Daten bleiben beim Aktualisieren von Seiten innerhalb desselben Tabs erhalten, werden jedoch beim Schließen des Tabs gelöscht. Zwei Tabs derselben Website verfügen über getrennte, isolierte sessionStorage-Speicher – sie teilen keine Daten.

Beide Speicher verwenden dieselbe API: setItem(key, value), getItem(key), removeItem(key), clear() und die Eigenschaft length. Derselbe Code funktioniert mit beiden – ersetzen Sie einfach localStorage durch sessionStorage oder umgekehrt.

Verwenden Sie localStorage für: Benutzereinstellungen (Design, Sprache), zwischengespeicherte API-Antworten und die Funktion „Angemeldet bleiben“. Verwenden Sie sessionStorage für: den Status von Assistenten- oder Formularschritten, einen temporären Warenkorb vor dem Bezahlvorgang und Daten, die aus Datenschutzgründen nicht über mehrere Besuche hinweg erhalten bleiben sollen.

Beide Speicher sind strikt auf die Origin beschränkt (Protokoll + Host + Port). https://example.com kann nicht auf den von http://example.com gesetzten localStorage zugreifen. Dies ist eine Sicherheitsgrenze – auch Subdomains sind getrennte Origins, sofern document.domain nicht manipuliert wird (veraltet).

In den meisten Browsern gilt für beide ein Limit von etwa 5 MB pro Origin. Bei einer Überschreitung des Limits wird ein QuotaExceededError ausgelöst. Für die Speicherung großer Datenmengen benötigen Sie IndexedDB, das Gigabytes strukturierter Daten unterstützt. Web Storage ist für kleine Schlüssel-Wert-Paare gedacht, nicht für binäre Blobs oder große Datensätze.

Lese- und Schreibvorgänge von Web Storage sind synchron und blockieren den Hauptthread. Bei großen Lese- oder Schreibvorgängen kann dies zu Ruckeln führen. Bevorzugen Sie IndexedDB für häufige Operationen mit großen Datenmengen. Halten Sie Werte in Web Storage klein und greifen Sie nur selten darauf zu, um Performanceprobleme zu vermeiden.

Web Storage speichert ausschließlich Zeichenfolgen. Serialisieren Sie Objekte mit JSON.stringify() und deserialisieren Sie sie mit JSON.parse(). Behandeln Sie Fehler beim Parsen: try { return JSON.parse(stored) } catch { return defaultValue }. Beschädigte oder nicht als JSON vorliegende Werte im Speicher führen zu Parse-Fehlern.

localStorage wird im privaten bzw. Inkognito-Modus gelöscht, sobald alle privaten Fenster geschlossen sind – er verhält sich dann wie sessionStorage. Code, der sich für den Authentifizierungsstatus auf localStorage stützt, sollte den Fall behandeln, dass localStorage unerwartet gelöscht wurde.

Browser schränken den Zugriff auf Speicher von Drittanbietern zunehmend ein. Ein Iframe von third-party.com auf first-party.com kann nicht auf den localStorage von third-party.com zugreifen. Safaris ITP und Firefoxs Enhanced Tracking Protection partitionieren den Speicher – die Nutzung als Erstanbieter ist davon nicht betroffen.

Wann wird sessionStorage gelöscht?

localStorage bleibt unbegrenzt erhalten, bis er programmgesteuert oder durch den Benutzer gelöscht wird; sessionStorage wird beim Schließen des Tabs gelöscht. Beide sind synchrone, auf die Origin beschränkte Schlüssel-Wert-Speicher für Zeichenfolgen mit einer Kapazität von etwa 5 MB. Verwenden Sie localStorage für Einstellungen und persistenten Status und sessionStorage für temporären, sitzungsbezogenen Status, der das Schließen des Tabs nicht überdauern soll.