JSON, localStorage und dein erstes fetch

Serialisiere deine Daten als JSON, speichere sie mit localStorage im Browser und hole entfernte Daten mit fetch.

10 Min. · 3 Fragen

JSON ist das universelle Austauschformat des Webs: Es ist Text, dessen Syntax an JavaScript-Objekte erinnert (Schlüssel in doppelten Anführungszeichen, keine Funktionen). Zwei Methoden genügen dir: JSON.stringify macht aus einem JavaScript-Wert eine Zeichenkette, JSON.parse geht den umgekehrten Weg.

const task = { title: "Review the lesson", done: false };

const json = JSON.stringify(task);
console.log(json);
// {"title":"Review the lesson","done":false}

const parsed = JSON.parse(json);
console.log(parsed.done); // false

localStorage bewahrt Daten im Browser auf, sogar nachdem der Tab geschlossen wurde. Es ist perfekt für ein gewähltes Theme, einen Entwurf oder eine Aufgabenliste. Da es nur Text speichert, dient JSON als Brücke: serialisiere vor setItem, deserialisiere nach getItem.

const tasks = [
  { title: "Buy bread", done: false },
  { title: "Review the lesson", done: true }
];

localStorage.setItem("tasks", JSON.stringify(tasks));

const raw = localStorage.getItem("tasks");
const saved = raw ? JSON.parse(raw) : [];
console.log(saved.length); // 2

Der letzte Baustein: Daten von einem Server holen. fetch sendet eine HTTP-Anfrage und gibt ein Promise zurück. Mit async/await liest sich der Code von oben nach unten: Du wartest auf die Antwort, prüfst, dass sie gültig ist, und wartest dann auf die JSON-Dekodierung, die ebenfalls asynchron ist.

async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was macht JSON.stringify?
   • Es wandelt eine JSON-Zeichenkette in ein JavaScript-Objekt um
   • Es wandelt einen JavaScript-Wert in eine JSON-Zeichenkette um
   • Es validiert die Syntax einer JSON-Datei
2. Was gibt localStorage.getItem für einen Schlüssel zurück, der nicht existiert?
   • Eine leere Zeichenkette
   • undefined
   • null
   • Es wird ein Fehler geworfen
3. Warum await response.json() schreiben statt einfach response.json()?
   • Weil response.json() ein Promise zurückgibt
   • Um die Antwort in eine Zeichenkette umzuwandeln
   • Um die Anfrage erneut zu versuchen, falls sie fehlgeschlagen ist