JSON im Browser speichern und wieder laden

1. Was ist localStorage?

localStorage speichert Werte als Text. Jeder Wert bekommt einen Schluessel. Spaeter kannst du mit diesem Schluessel den gespeicherten Text wieder laden. Wichtig: Weil nur Text gespeichert wird, muessen Objekte vorher mit JSON umgewandelt werden.

localStorage.setItem('username', 'Mina');

const username = localStorage.getItem('username');

console.log(username);

2. Objekt speichern

Ein Objekt wird mit JSON.stringify zu JSON-Text gemacht. Danach kann es in localStorage gespeichert werden.

const user = {
  name: 'Mina',
  points: 80,
  completedLessons: ['json-basics', 'objects-arrays'],
};

const jsonText = JSON.stringify(user);

localStorage.setItem('learningUser', jsonText);

3. Objekt wieder laden

Beim Laden bekommst du zuerst Text zurueck. Mit JSON.parse wird daraus wieder ein JavaScript-Objekt.

const savedText = localStorage.getItem('learningUser');

if (savedText !== null) {
  const user = JSON.parse(savedText);
  console.log(user.name);
  console.log(user.points);
}

Die Pruefung auf null ist wichtig. Wenn noch nichts gespeichert wurde, gibt localStorage.getItem naemlich null zurueck.

4. Daten aktualisieren

Wenn du gespeicherte Daten veraendern willst, arbeitest du in drei Schritten: laden, veraendern, erneut speichern.

const savedText = localStorage.getItem('learningUser');

if (savedText !== null) {
  const user = JSON.parse(savedText);

  user.points = user.points + 10;
  user.completedLessons.push('local-storage');

  localStorage.setItem('learningUser', JSON.stringify(user));
}

5. Daten loeschen

Manchmal soll ein Speicherstand entfernt werden. Dafuer gibt es removeItem. Mit clear wuerdest du alles im localStorage der Seite loeschen.

localStorage.removeItem('learningUser');

// Vorsicht: loescht alle localStorage-Daten dieser Website
localStorage.clear();

6. Mini-App: Lernfortschritt speichern

Dieses Beispiel speichert, welche Lektion zuletzt geoeffnet wurde. Beim naechsten Laden kann die App diese Information wieder anzeigen.

function saveProgress(lessonId) {
  const progress = {
    lastLesson: lessonId,
    updatedAt: new Date().toISOString(),
  };

  localStorage.setItem('progress', JSON.stringify(progress));
}

function loadProgress() {
  const savedText = localStorage.getItem('progress');

  if (savedText === null) {
    return null;
  }

  return JSON.parse(savedText);
}

saveProgress('json-storage');
console.log(loadProgress());