Beides bietet die Möglichkeit kleine, nicht sicherheitsrelevante Daten im Browser des Nutzers abzulegen. Der Browser organisiert die Ablage anhand der aufgerufenen Domain. Das Handling beider Optionen ist identisch, da Beide das Web Storage API implementieren. Es gibt lediglich Unterschiede bei Lifetime und Scope der hinterlegten Daten.
Übersicht:
| Merkmal | localStorage | sessionStorage |
|---|---|---|
| Lebensdauer | Dauerhaft (bis manuell gelöscht) | Nur für die aktuelle Sitzung (bis Browser geschlossen) |
| Gültigkeitsbereich | Domain-weit (über Tabs/Fenster hinweg) | Nur im aktuellen Tab/Fenster |
| Speicherlimit | ca. 5–10 MB (je nach Browser) | ca. 5 MB (je nach Browser) |
| Datentypen | Nur Strings (Objekte via JSON.stringify() / JSON.parse()) | Nur Strings (Objekte via JSON.stringify / JSON.parse()) |
| Persistenz nach Browser-Neustart | ✅ Ja | ❌ Nein |
| Zugriff über Tabs | ✅ Ja, innerhalb derselben Domain | ❌ Nein |
| Typische Verwendung | Einstellungen, Tokens, Caches | Temporäre Daten einer Sitzung, z.B. unfertige Formulare |
Methoden und Properties:
| Kategorie | Name | Beschreibung | Beispiel |
|---|---|---|---|
| Daten setzen | setItem(key, value) | Speichert einen Wert unter einem Schlüssel | localStorage.setItem("user", "Alice") |
| Daten lesen | getItem(key) | Liefert den Wert zum Schlüssel oder null, falls nicht vorhanden | localStorage.getItem("user") |
| Daten löschen | removeItem(key) | Löscht den Wert zum Schlüssel | localStorage.removeItem("user") |
| Alles löschen | clear() | Löscht alle gespeicherten Werte | localStorage.clear() |
| Schlüssel abrufen | key(index) | Liefert den Schlüssel an der Position index | localStorage.key(0) |
| Anzahl speichern | length | Anzahl der gespeicherten Schlüssel | console.log(localStorage.length) |
Hinweise:
Alle Werte werden als Strings gespeichert. Objekte oder Arrays müssen vorher mit JSON.stringify() umgewandelt werden. (Serialisierung) Vor dem Lesen wird durch JSON.parse() aus serialisierten Daten wieder eine verwendbare Instanz.
Methoden und private Felder werden nicht gespeichert, sondern entfernt.
Zugriff erfolgt über Domain: Jede Domain hat ihren eigenen Storage.
sessionStorage ist tab-spezifisch, localStorage domainspezifisch und persistent.
Beispiel:
// localStorage
localStorage.setItem("user", JSON.stringify({ name: "Alice" }));
const user = JSON.parse(localStorage.getItem("user"));
// sessionStorage
sessionStorage.setItem("temp", "42");
console.log(sessionStorage.getItem("temp")); // "42"