1. 📦 localStorage vs. sessionStorage
Moderne Browser stellen zwei Schlüssel-Wert-Speicher zur Verfügung, die rein clientseitig ohne Server-Datenbank arbeiten:
| Merkmal | localStorage |
sessionStorage |
|---|---|---|
| Lebensdauer | Dauerhaft (überlebt Browser-Neustarts) | Nur für die Dauer des Browser-Tabs |
| Scope | Same-Origin (über alle Tabs derselben Domain) | Isoliert auf den einzelnen Tab |
| Speicherplatz | ca. 5–10 MB pro Origin | ca. 5 MB pro Tab |
| Typischer Einsatz | Theme (Dark Mode), Highscores, Entwürfe | Mehrschritt-Formulare, temporärer Tab-Status |
localStorage ist wie ein Bankschließfach: Was du dort ablegst, wartet auch nach Jahren treu auf dich. sessionStorage ist wie ein Reisetagebuch im Zugabteil: Sobald du den Zug verlässt (Tab schließen), verbleibt es im alten Zug und eine neue Fahrt beginnt mit leeren Blättern.
2. 🔄 JSON-Serialisierung komplexer Datenstrukturen
Da Web Storage nur Strings akzeptiert, müssen Objekte und Arrays vor dem Speichern mit JSON.stringify() serialisiert und beim Laden mit JSON.parse() deserialisiert werden:
// 🎯 1. Objekt serialisieren & speichern:
const benutzer = { id: 101, name: "Ada", skills: ["JS", "TS"], aktiv: true };
localStorage.setItem("user_profile", JSON.stringify(benutzer));
// 🎯 2. Laden & Deserialisieren:
const raw = localStorage.getItem("user_profile");
if (raw) {
const geladenerBenutzer = JSON.parse(raw);
console.log(geladenerBenutzer.skills[0]); // "JS"
}
// 🎯 3. Einzelnen Schlüssel entfernen:
localStorage.removeItem("user_profile");Wenn du localStorage.setItem("obj", { a: 1 }) ohne JSON.stringify aufrufst, ruft JavaScript automatisch .toString() auf. Im Storage landet dann der unbrauchbare String "[object Object]"!
3. 🛡️ Robuste Fehlerbehandlung mit try / catch
Im professionellen Umfeld kann der Inhalt von Storage durch manuelle Benutzer-Eingaben oder veraltete Formate korrupt sein. Defektes JSON wirft beim Parsen einen SyntaxError:
function ladeEinstellungenSicher(key, standardWert) {
try {
const raw = localStorage.getItem(key);
return raw !== null ? JSON.parse(raw) : standardWert;
} catch (err) {
console.warn(`Defektes JSON bei Schlüssel "${key}", nutze Standard-Fallback.`, err);
return standardWert;
}
}📑 4. Cheat-Sheet: Web Storage API
| Befehl | Signatur | Beschreibung |
|---|---|---|
setItem |
storage.setItem(key, value) |
Schreibt Schlüssel & Wert (als String) |
getItem |
storage.getItem(key) |
Liest Wert oder liefert null |
removeItem |
storage.removeItem(key) |
Löscht den Schlüssel aus dem Speicher |
clear |
storage.clear() |
Leert den gesamten Speicher der Domain |
JSON.stringify/parse |
JSON.stringify(obj) / JSON.parse(str) |
Objekt-Serialisierung & Deserialisierung |