JavaScript Academy · Lektion

Objekte mit JSON speichern

Serialisieren Sie Objekte, um sie zu speichern und abzurufen.

Objekte mit JSON speichern ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Der Speicher enthält nur Zeichenketten

Web Storage speichert Zeichenketten, daher können Sie ein Objekt nicht direkt speichern. Beim Speichern entsteht der nutzlose Text "[object Object]". Die Lösung ist JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Mit JSON.stringify serialisieren

Wandeln Sie ein Objekt vor dem Speichern mit JSON.stringify in eine JSON-Zeichenkette um.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Mit JSON.parse deserialisieren

Wandeln Sie die Zeichenkette beim Lesen mit JSON.parse wieder in ein Objekt um.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Hin und zurück

Das vollständige Muster lautet: auf dem Weg hinein stringifizieren, auf dem Weg hinaus parsen. Das funktioniert gleichermaßen für Objekte und Arrays.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Den Fall null behandeln

JSON.parse(null) gibt null zurück und löst keinen Fehler aus. Das Parsen fehlender Daten kann Sie dennoch überraschen. Stellen Sie einen Standardwert bereit.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Beschädigte Daten abfangen

Wenn gespeichertes JSON fehlerhaft formatiert ist, löst JSON.parse einen SyntaxError aus. Schließen Sie den Aufruf in try/catch ein, damit ein fehlerhafter Eintrag Ihre App nicht zum Absturz bringt.

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

Eine wiederverwendbare Speicherhilfsfunktion

Kapseln Sie den Stringifizierungsschritt in einer Hilfsfunktion, damit Sie ihn nie vergessen.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

Was JSON nicht speichert

JSON kann keine Funktionen, undefined, Date-Objekte (sie werden zu Zeichenketten), Map oder Set darstellen. Planen Sie entsprechend: Speichern Sie Datumsangaben als ISO-Zeichenketten und erstellen Sie sie beim Lesen wieder als Datumsobjekte.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Datumsangaben wiederherstellen

Da Datumsangaben als Zeichenketten serialisiert werden, wandeln Sie sie nach dem Parsen zurück, wenn Sie Date-Methoden benötigen.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Verschachtelte Daten aktualisieren

Um einen Teil eines gespeicherten Objekts zu ändern, lesen Sie es aus, ändern Sie die Kopie und schreiben Sie sie zurück. Der Speicher bietet keine API für Teilaktualisierungen.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Gespeicherte Strukturen versionieren

Die Struktur von App-Daten ändert sich im Laufe der Zeit. Mit einem gespeicherten version-Feld können Sie alte Daten migrieren oder verwerfen, wenn sich das Format weiterentwickelt.

saveJSON("prefs", { version: 2, theme: "dark" });

Kurzer Test

Objekte in Web Storage speichern.

Zusammenfassung

Der Speicher enthält Zeichenketten. Verwenden Sie daher vor dem Speichern von Objekten JSON.stringify und beim Lesen JSON.parse. Sichern Sie das Parsen mit try/catch ab und stellen Sie Standardwerte bereit. Denken Sie daran, dass JSON Funktionen und undefined nicht speichert und Datumsangaben in Zeichenketten umwandelt. Aktualisieren Sie verschachtelte Daten durch Lesen, Ändern und Zurückschreiben und ziehen Sie eine Versionierung Ihrer gespeicherten Strukturen in Betracht.

Häufig gestellte Fragen

Ist die Lektion „Objekte mit JSON speichern“ kostenlos?

Ja — der vollständige Text von „Objekte mit JSON speichern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Objekte mit JSON speichern“?

Serialisieren Sie Objekte, um sie zu speichern und abzurufen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Objekte mit JSON speichern“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy