localStorage in JavaScript (mit funktionierenden Beispielen)

localStorage in JavaScript

localStorage in JavaScript: Beispiele, JSON, Limits | We.Inc

Teste localStorage in einem Live-Playground und kopiere funktionierende Beispiele für gespeicherte Einstellungen, einen Warenkorb und ein Theme, dazu JSON-Handling, Größenlimits, Fehler und Sync zwischen Tabs.

localStorage ist ein Schlüssel-Wert-Speicher im Browser pro Origin, der Daten auch nach dem Schließen von Tab und Browser behält. Mit setItem(key, value) speicherst du, mit getItem(key) liest du, mit removeItem(key) löschst du, und clear() leert ihn. Werte sind immer Strings, also verpacke Objekte mit JSON.stringify und JSON.parse.

Die komplette Storage API auf einen Blick

Member
Was es tut
Rückgabe

setItem(key, value)
Fügt einen Eintrag hinzu oder überschreibt ihn

getItem(key)
Liest einen Eintrag
Den String oder null, falls er fehlt

removeItem(key)
Löscht einen Eintrag

clear()
Löscht alle Einträge dieses Origins

key(index)
Name des Eintrags an einer Position
Ein String oder null

Wie viele Einträge gespeichert sind
Eine Zahl

Die meisten localStorage-Bugs entstehen aus drei Überraschungen: Alles wird zum String, der Aufruf kann eine Exception werfen, und die Daten hängen an genau einem Origin. Der Playground unten schreibt in deinen eigenen Browser, damit du diese Regeln in Aktion siehst. Danach zeigen die Beispiele sichere Muster für Einstellungen, einen Warenkorb und einen Theme-Umschalter.

Gib im Playground einen Schlüssel und einen Wert ein und klicke auf Speichern. Der Eintrag wird in den Speicher dieser Seite in deinem Browser geschrieben.
Klicke auf Lesen, um ihn wieder abzurufen, oder auf Löschen, um ihn zu entfernen. Die Tabelle darunter listet jeden Schlüssel, den diese Website für dich speichert.
Stell den Werttyp auf Objekt um, um zu sehen, wie JSON.stringify es in Text verwandelt und JSON.parse es wieder aufbaut.
Kopiere jedes Beispiel unten in dein eigenes Projekt. Jedes umschließt den Speicherzugriff mit try und catch.

Versieh deine Schlüssel mit einem Präfix, zum Beispiel shop:cart, damit sich zwei Skripte auf demselben Origin nicht gegenseitig überschreiben.
Speichere neben strukturierten Daten eine Versionsnummer, damit du alte Formate nach einem Redesign migrieren kannst.
Leg hier nie Passwörter, Tokens oder persönliche Daten ab. Jedes Skript, das auf der Seite läuft, kann jeden Eintrag lesen.
Lies einmal beim Start und halte den Wert im Speicher. Jeder Aufruf ist synchron und blockiert den Main Thread.
Nutze sessionStorage, wenn die Daten verschwinden sollen, sobald der Besucher den Tab schließt.

Häufige Fragen

Wie viele Daten passen in localStorage?

MDN dokumentiert in aktuellen Browsern ein Limit von 5 MiB localStorage pro Origin, mit separaten 5 MiB für sessionStorage. Strings werden als UTF-16 gespeichert, daher passen weniger Zeichen hinein, als die Byteanzahl vermuten lässt. Wer über das Limit hinaus schreibt, löst einen QuotaExceededError aus.

Läuft localStorage ab?

Nein. Einträge bleiben, bis dein Code sie entfernt oder der Besucher die Websitedaten löscht. In einem privaten Fenster löscht der Browser sie, wenn der letzte private Tab geschlossen wird. Wenn du ein Ablaufdatum brauchst, speichere einen Zeitstempel mit dem Wert und prüfe ihn beim Lesen.

Warum gibt getItem "[object Object]" zurück?

setItem macht aus allem, was du übergibst, einen String. Ein einfaches Objekt wird zum Text [object Object], und die Daten gehen verloren. Speichere JSON.stringify(obj) und lies es mit JSON.parse zurück.

Wird localStorage zwischen http und https geteilt?

Nein. Der Speicher gehört zu einem Origin, also Schema, Host und Port zusammen. http://example.com und https://example.com bekommen jeweils einen eigenen Speicher, ebenso Subdomains.

Wie synchronisiere ich Änderungen zwischen Browser-Tabs?

Lausche auf das storage-Event auf window. Es feuert in den anderen offenen Dokumenten desselben Origins, wenn eines davon einen Wert ändert, und liefert key, oldValue und newValue. Der Tab, der die Änderung vorgenommen hat, erhält es nicht.

localStorage oder Cookies?

Cookies werden bei jeder Anfrage an den Server geschickt und eignen sich für Sessions. localStorage verlässt nie den Browser, fasst mehr und eignet sich für Oberflächenzustände wie ein Theme, einen Entwurf oder eine eingeklappte Seitenleiste.

Wann localStorage das richtige Werkzeug ist

Es glänzt bei kleinen Erinnerungen der Oberfläche: der zuletzt geöffnete Tab, ein weggeklicktes Banner, eine Nachricht im Entwurf, eine bevorzugte Einheit. Diese Daten zu verlieren ist leicht ärgerlich, aber nicht schädlich, und das passt dazu, wie leicht Menschen sie löschen.
Schlecht geeignet ist es für alles, was du nicht verlieren darfst, alles, was ein anderes Gerät sehen soll, oder große Datenmengen. Bestellungen gehören auf einen Server, und große strukturierte Daten gehören in IndexedDB, das asynchron arbeitet.

Warum jeder Aufruf try und catch braucht

Browser werfen einen SecurityError, wenn der Speicher blockiert ist, zum Beispiel wenn ein Besucher Websitedaten deaktiviert hat, und Seiten, die über file:-URLs geöffnet werden, verhalten sich je nach Browser unterschiedlich. Ein voller Speicher wirft beim Schreiben einen QuotaExceededError.
Ein kleiner Wrapper, der bei einem Fehler einen Fallback-Wert zurückgibt, hält den Rest deiner Seite am Laufen. Die Beispiele unten nutzen alle diese Form.

Sicher bleiben

Alles im Speicher kann von jedem Skript auf dem Origin gelesen werden, auch von einem Drittanbieter-Widget oder von Code, der über eine Cross-Site-Scripting-Lücke eingeschleust wurde. Behandle es als öffentlich für die Seite.
Zurückgelesene Daten sind ebenfalls nicht vertrauenswürdige Eingaben. Validiere sie vor der Verwendung und gib sie als Text aus, nie als HTML.

localStorage vs. sessionStorage vs. Cookies

Wähle den Speicher danach, wie lange die Daten leben sollen und wer sie braucht

localStorage
sessionStorage
Cookie

Lebensdauer
Bis zum Entfernen
Bis der Tab geschlossen wird
Bis zum Ablaufdatum

Zwischen Tabs geteilt
Ja, gleicher Origin
Nein, nur ein Tab
Ja

An den Server gesendet
Nein
Nein
Ja, bei jeder Anfrage

Größe (Angabe von MDN)
5 MiB pro Origin
5 MiB pro Origin
Klein, Limits je nach Browser

Art der API
Synchron
Synchron
document.cookie-String

Beispiele zum Kopieren

Sichere Lese- und Schreibhelfer mit JSON

Eine Stelle behandelt blockierten Speicher, ein volles Kontingent und kaputtes JSON, damit der Rest deines Codes das nie tun muss.

Die Einstellungen eines Besuchers merken

Standardwerte werden mit dem Gespeicherten zusammengeführt, sodass eine später hinzugefügte Einstellung ältere gespeicherte Daten nicht kaputt macht.

Ein kleiner Warenkorb, der ein Neuladen übersteht

Jede Änderung erzeugt ein neues Array und schreibt es zurück. Die Preise legt beim Checkout weiterhin der Server fest.

Theme-Wahl mit Fallback auf das System

Ist nichts gespeichert, gewinnt die Einstellung des Betriebssystems. Führe das früh im head aus, um ein Aufblitzen des falschen Themes zu vermeiden.

Einträge, die ablaufen

localStorage hat kein eingebautes Ablaufdatum, also speichere die Frist mit dem Wert und verwirf veraltete Einträge beim Lesen.

Offene Tabs synchron halten

Das storage-Event erreicht jeden anderen Tab auf demselben Origin, sodass sich ein Warenkorb-Badge ohne Neuladen aktualisieren kann.

Der Speicher ist in diesem Browser blockiert, daher würde jeder Aufruf eine Exception werfen. Dein Code braucht einen Fallback.

{name} geworfen: {message}

Gib zuerst einen Schlüssel ein.

{call} hat {n} Zeichen gespeichert.

{call} hat null zurückgegeben: Es gibt keinen Eintrag mit diesem Schlüssel.

JSON.parse hat zurückgegeben: {value}

Der gespeicherte Text ist kein JSON: {value}

{call} hat den String {value} zurückgegeben

{call} erledigt.

{n} Playground-Einträge entfernt. Andere Schlüssel dieser Website blieben unberührt.

{name}-Playground

Speichere, lies und lösche Einträge in deinem eigenen Browser und sieh jeden Schlüssel, den diese Website speichert. Playground-Schlüssel beginnen mit demo:, damit sie nie mit der Website kollidieren.

Schlüssel

Wert

Werttyp

Einfacher String

Objekt (JSON)

Speichern

Lesen

Löschen

Playground-Schlüssel leeren

Ergebnisse erscheinen hier.

In deinem Browser gespeicherte Playground-Einträge ({n})

Gespeicherter String

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap