localStorage vs sessionStorage: die Web Storage API erklärt

Die Web Storage API gibt dem Browser zwei einfache Schlüssel-Wert-Speicher — localStorage und sessionStorage — um kleine Datenmengen auf dem Gerät des Nutzers aufzubewahren. Beide teilen sich exakt dieselbe API; sie unterscheiden sich nur darin, wie lange die Daten leben und wer sie sehen kann.

Die gemeinsame API

Beide Objekte stellen dieselben fünf Methoden bereit, und beide speichern ausschließlich Strings:

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'
localStorage.removeItem('theme');
localStorage.clear();                          // wipe everything
console.log(localStorage.length);              // number of keys

Das Lesen eines nicht existierenden Schlüssels gibt null zurück, sodass Sie mit || einen Fallback setzen können:

const theme = localStorage.getItem('theme') || 'light';

Der einzige echte Unterschied: Lebensdauer

Das ist die ganze Entscheidung in einem Satz. localStorage bleibt bestehen, bis Sie es löschen — es überlebt Neuladevorgänge, geschlossene Tabs und Browser-Neustarts. sessionStorage lebt nur so lange wie der Tab: Schließen Sie den Tab und die Daten sind weg, und ein zweiter Tab auf derselben Website erhält seinen eigenen separaten Speicher.

Objekte speichern: stringify und parse

Da der Speicher nur Strings hält, muss alles Strukturierte durch JSON laufen. Serialisieren Sie beim Hineinlegen, parsen Sie beim Herausholen:

const user = { name: 'Ada', loggedIn: true };

// Save
localStorage.setItem('user', JSON.stringify(user));

// Read back
const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.name); // 'Ada'

Umschließen Sie JSON.parse mit einem try/catch, wenn der Wert fehlen oder beschädigt sein könnte — das Parsen von null oder ungültigem Text wirft einen Fehler:

function readJSON(key, fallback) {
  try {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : fallback;
  } catch {
    return fallback;
  }
}

Geltungsbereich und das Größenlimit

Der Speicher ist auf den Origin beschränkt (Schema + Host + Port): https://example.com und http://example.com teilen keine Daten. Das Kontingent beträgt in den meisten Browsern grob 5 MB pro Origin — großzügig für Einstellungen und kleine Caches, aber keine Datenbank. Eine Überschreitung lässt setItem einen QuotaExceededError werfen, also schützen Sie große Schreibvorgänge ab.

Auf Änderungen tab-übergreifend reagieren

Das storage-Event wird auf anderen Tabs desselben Origins ausgelöst, wenn sich localStorage ändert — praktisch, um ein Logout oder einen Theme-Wechsel über offene Fenster hinweg zu synchronisieren. Beachten Sie, dass es nicht im Tab ausgelöst wird, der die Änderung vorgenommen hat, und sessionStorage löst es nie aus:

window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    applyTheme(event.newValue);
  }
});

Welchen sollten Sie verwenden?

	localStorage	sessionStorage
Lebensdauer	Bis ausdrücklich gelöscht	Bis der Tab schließt
Zwischen Tabs geteilt	Ja (gleicher Origin)	Nein (pro Tab)
Übersteht Neuladen	Ja	Ja
Löst storage-Event aus	Ja	Nein
Typische Verwendung	Theme, Einstellungen, "Angemeldet bleiben"	Einmalige Formularentwürfe, Assistentenschritte

Greifen Sie zu localStorage, wenn die Daten zwischen Besuchen erhalten bleiben sollen, und zu sessionStorage, wenn sie nur für den aktuellen Tab von Bedeutung sind. Für alles Sensible — Tokens, Passwörter, persönliche Daten — ist keiner von beiden geeignet: Beide sind von jedem Skript auf der Seite lesbar, also halten Sie Geheimnisse vollständig aus dem Web Storage heraus.