Im Browser speichern

Alles, was eine Seite in Variablen behält, ist weg, wenn du sie neu lädst, weil das Skript wieder von vorn läuft. Bei den Daten vom Server ist das kein Problem: Die Seite lädt sie einfach noch einmal. Aber die eigenen Sachen des Nutzers, wie seine Einstellungen oder die Filme, die er markiert hat, sind nicht auf dem Server. Die Seite muss sie woanders aufbewahren.

Dafür hat der Browser den localStorage, einen kleinen Speicher, den jede Website im Browser bekommt. Was eine Seite dort speichert, bleibt nach dem Neuladen erhalten und sogar, nachdem du den Browser geschlossen hast. Es wird in diesem Browser auf diesem Computer aufbewahrt: Andere Personen sehen es nicht, und dieselbe Website in einem anderen Browser auch nicht.

Du speicherst einen Wert unter einem Namen, dem Schlüssel, und liest ihn später mit demselben Schlüssel:

localStorage.setItem("farbe", "grün");
console.log(localStorage.getItem("farbe"));
console.log(localStorage.getItem("groesse"));

localStorage.removeItem("farbe");
console.log(localStorage.getItem("farbe"));

grün
null
null

• setItem(schluessel, wert) speichert den Wert unter dem Schlüssel. Wenn darunter schon etwas gespeichert ist, ersetzt der neue Wert es.
• getItem(schluessel) gibt zurück, was unter dem Schlüssel gespeichert ist, oder null, wenn nichts da ist. null kennst du von querySelector(): Es bedeutet „nichts“.
• removeItem(schluessel) löscht den Schlüssel mit seinem Wert.

Wenn die Seite geöffnet wird, liest sie, was sie vorher gespeichert hat. getItem() kann null zurückgeben, prüfe das also zuerst:

const gespeicherteFarbe = localStorage.getItem("farbe");
if (gespeicherteFarbe !== null) {
    farbeText.textContent = `Deine Lieblingsfarbe: ${gespeicherteFarbe}`;
}

Ohne die Prüfung würde ein neuer Besucher Deine Lieblingsfarbe: null sehen.

In der Vorschau öffnet jeder Klick auf Ausführen die Seite neu, wie ein Neuladen, und die Seite findet, was sie in früheren Durchläufen gespeichert hat, solange du die Übung geöffnet hast. Sobald sie etwas gespeichert hat, zeigt die Konsole einen Button Gespeicherte Daten löschen, der alles löscht, als wäre die Seite nie geöffnet worden. Auch das Zurücksetzen des Codes (der runde Pfeil neben Ausführen) löscht es.