localStorage ist ein einfacher, dauerhafter Schlüssel-Wert-Speicher direkt im Browser. Er gehört zur Web Storage API und erlaubt Webseiten, kleine Datenmengen ohne Serverkontakt zu speichern — sie überleben Neustarts, Tab-Schließen und sogar Browser-Updates.
Wie funktioniert localStorage?
Die API ist denkbar einfach: Jede Seite bekommt einen eigenen Speicherbereich pro Origin (Protokoll + Domain + Port). Eine andere Domain kann die Daten nicht lesen. Die Werte bleiben so lange erhalten, bis die Seite sie explizit löscht oder der Nutzer die Browserdaten entfernt.
// Wert speichern
localStorage.setItem('theme', 'dark');
// Wert lesen
const theme = localStorage.getItem('theme');
// Wert löschen
localStorage.removeItem('theme');
// Komplett leeren
localStorage.clear();Wichtige Eigenschaften
- Nur Strings: Objekte müssen vor dem Speichern mit
JSON.stringify()undJSON.parse()umgewandelt werden. - Synchron: Jeder Zugriff blockiert kurz den Haupt-Thread — bei großen Datenmengen spürbar.
- Größenlimit: Klassisch etwa 5 MB pro Origin (gemeinsame Quote mit sessionStorage); bei Überschreiten wirft der Browser einen
QuotaExceededError. - Tab-Synchronisation: Ändert ein Tab einen Wert, feuert in den anderen Tabs das
storage-Event.
Typische Einsatzfälle
- Benutzereinstellungen wie Theme oder Sprache
- Warenkorb-Inhalte im Online-Shop
- Zuletzt angesehene Artikel
- Spielstände und Formularentwürfe
Grenzen und Sicherheit
localStorage ist kein sicherer Ort für Passwörter oder Tokens: Jedes eingeschleuste Skript (XSS) kann die Daten lesen. Für sensible Daten eignen sich Cookies mit Secure/HttpOnly-Flag oder serverseitige Speicherung. Auch große Datenmengen gehören nicht hierher — dafür ist IndexedDB die richtige Wahl.
Verwandte Grundlagen: sessionStorage, IndexedDB, Cookie, DOM, PWA, Service Worker.