JS 10: Web Storage & JSON-Serialisierung 💾

Willkommen zu Modul 10 des JavaScript-Kurses!

In modernen Web-Anwendungen müssen Einstellungen, Warenkörbe, Spielstände oder Formulardaten clientseitig im Browser gespeichert werden – auch wenn der Benutzer die Seite neu lädt oder den Browser schließt.

Die Web Storage API (localStorage und sessionStorage) in Kombination mit JSON-Serialisierung (JSON.stringify & JSON.parse) bildet das Fundament für clientseitige Datenpersistenz.

💡 1. Das Wichtigste in Kürze

A. localStorage vs. sessionStorage

Der Browser stellt zwei getrennte Key-Value-Speicher zur Verfügung:

Eigenschaft	`localStorage`	`sessionStorage`
Lebensdauer	Dauerhaft (bleibt nach Browser-Neustart erhalten)	Bis der Browser-Tab geschlossen wird
Gültigkeitsbereich	Same-Origin (gleiches Protokoll, Domain, Port)	Nur im aktuellen Browser-Tab / Fenster
Speicherkapazität	Typisch ca. 5 – 10 MB pro Origin	Typisch ca. 5 MB pro Tab
Typischer Nutzen	Theme-Wahl, Highscores, Offline-Caches	Schrittweises Formular, temporärer Session-State

B. Die Standard-Methoden der Storage API

Beide Speicher bieten dieselbe intuitive Schnittstelle:

// 1. Wert speichern (Key und Value sind immer Strings!):
localStorage.setItem("benutzerName", "Ada Lovelace");

// 2. Wert abrufen (liefert null, wenn der Key nicht existiert):
const name = localStorage.getItem("benutzerName"); // "Ada Lovelace"
const fehlt = localStorage.getItem("unbekannt");    // null

// 3. Einzelnen Eintrag löschen:
localStorage.removeItem("benutzerName");

// 4. Gesamten Speicher der Domain leeren:
localStorage.clear();

C. Komplexe Datentypen speichern mit JSON

Da die Web Storage API ausschließlich Strings speichert, führen Objekte und Arrays ohne Serialisierung zu dem gefürchteten "[object Object]"-Fehler!

const spieler = { name: "Mario", punkte: 1200, items: ["Pilz", "Stern"] };

// ❌ FALSCH: Speichert nur den String "[object Object]"
localStorage.setItem("player", spieler);

// ✅ RICHTIG: In JSON-String serialisieren
const jsonString = JSON.stringify(spieler);
localStorage.setItem("player", jsonString);

// 📥 Beim Laden: Von JSON zurück in ein JavaScript-Objekt parsen
const geladenerString = localStorage.getItem("player");
if (geladenerString) {
  const parsedPlayer = JSON.parse(geladenerString);
  console.log(parsedPlayer.punkte); // 1200
}

D. Robuste Fehlerbehandlung (Defektes JSON & Quota Exceeded)

In Produktionscode können zwei Fehler auftreten:

Defektes JSON im Storage: Ein anderer Scriptteil oder eine Drittanbieter-Erweiterung hat ungültigen Text hinterlegt.
QuotaExceededError: Der Speicherplatz (5 MB) ist voll.

function sicheresLaden(key, fallback) {
  try {
    const raw = localStorage.getItem(key);
    return raw !== null ? JSON.parse(raw) : fallback;
  } catch (err) {
    console.warn(`Warnung: JSON für ${key} beschädigt, nutze Fallback:`, err);
    return fallback;
  }
}

🔐 Die didaktische Analogie: "Das Schließfach & das Reisetagebuch"

localStorage ist das Bankschließfach:
Du legst deinen Reisepass (Benutzerprofil) oder deine Trophäen (Highscore) hinein. Selbst wenn du nach einem Jahr wiederkommst (Browser-Neustart), liegt alles genau so im Schließfach wie du es hinterlassen hast.
sessionStorage ist das Reisetagebuch der aktuellen Tour:
Du schreibst deine Tagesnotizen hinein, solange du im Zug sitzt (aktueller Tab). Sobald du aussteigst und nach Hause gehst (Tab schließen), beginnt die nächste Reise mit einem frischen, leeren Notizblock.
JSON.stringify & JSON.parse sind Vakuumierer & Entpacker:
Du kannst keinen dreidimensionalen Koffer (JavaScript-Objekt mit Methoden & Referenzen) durch den flachen Schließfachschlitz schieben. Du packst ihn flach zusammen (stringify), schiebst den Umschlag hinein und packst ihn beim Herausholen wieder vollständig aus (parse).

🎯 Aufgaben & Teilziele in `aufgabe.js`

TODO 1: speichereDaten(schluessel, daten, storageMock)
Validiere den Schlüssel, serialisiere beliebige Werte mit JSON.stringify und fange Speicherfehler ab.
TODO 2: ladeDaten(schluessel, standardWert = null, storageMock)
Lade Daten mit getItem, behandle fehlende Einträge sowie SyntaxError bei defektem JSON mit try/catch und liefere den standardWert zurück.
TODO 3: loescheDaten(schluessel, storageMock)
Entferne den Schlüssel sauber aus dem Storage mit removeItem.
TODO 4: aktualisiereHighscore(spielerName, punkte, storageMock)
Verwalte eine Bestenliste unter dem Key "highscores". Füge den neuen Spieler ein, sortiere absteigend nach Punkten, kürze auf die Top 10 und speichere die Liste persistent ab.

🧪 Tests ausführen

Öffne die Web-IDE oder führe die Unittests aus. Sobald alle 16 Tests grün sind, hast du clientseitige Persistenz und JSON-Verarbeitung gemeistert!

5 KiB Raw Blame History Unescape Escape