Favoriten merken

In dieser App kannst du deine Lieblingsbands mit einem Stern markieren. Aber klicke auf Ausführen, und die Sterne sind weg: State lebt nur so lange wie die Seite. Im JavaScript-Kurs hast du so etwas in localStorage abgelegt. In React sind es zwei Schritte.

Speichern. Das Schreiben in localStorage geschieht außerhalb von React, ist also ein Job für einen Effekt. Er soll laufen, wenn sich die Favoriten ändern, seine Abhängigkeit ist also favoriten. localStorage behält nur Text, also kommt das Array als JSON hinein:

useEffect(() => {
    localStorage.setItem("favoriten", JSON.stringify(favoriten));
}, [favoriten]);

Lesen. Wenn die App startet, sollen die Favoriten aus localStorage kommen, damit schon der allererste Render sie zeigt. Der Wert, mit dem ein State beginnt, ist das Argument von useState. Aber React verwendet dieses Argument nur im ersten Render, und bei jedem Render JSON zu lesen und zu parsen wäre vergeudete Arbeit. Gib useState deshalb eine Funktion. React ruft sie nur einmal auf, für den ersten Render, und der State beginnt mit dem, was sie zurückgibt:

const [favoriten, setFavoriten] = useState(() => {
    const gespeichert = localStorage.getItem("favoriten");
    return gespeichert === null ? [] : JSON.parse(gespeichert);
});

getItem() gibt null zurück, wenn nichts gespeichert ist, zum Beispiel wenn jemand die App zum ersten Mal öffnet. Dann beginnen die Favoriten als leeres Array.

Wie im JavaScript-Kurs startet jeder Klick auf Ausführen die Seite neu, wie ein Neuladen, und die Seite findet, was sie in früheren Durchläufen gespeichert hat. Der Button Gespeicherte Daten löschen der Konsole löscht es.

Typische Fehler:

• Das Array ohne JSON.stringify() zu speichern: localStorage macht daraus den Text 2,4, den JSON.parse() nicht zurücklesen kann.
• Zu lesen, ohne auf null zu prüfen: JSON.parse(null) ergibt null, und favoriten.includes() endet dann mit einem TypeError.