Die Liste speichern

Füge ein Produkt hinzu und klicke noch einmal auf Ausführen. Das Produkt ist weg: Wenn eine Seite geöffnet wird, beginnt ihr Skript von vorn, und die Liste wird wieder aus der Datei geladen. In einem echten Browser würde dasselbe jedes Mal passieren, wenn du die Seite schließt oder neu lädst. Eine Einkaufsliste, die vergisst, was du daraufgesetzt hast, ist nicht viel wert, also merkt sie sich in dieser Übung alles.

Wie du aus der Lektion über Daten von einem Server weißt, kann eine Seite Daten im Browser aufbewahren, im localStorage, und die Daten bleiben dort, auch wenn die Seite geschlossen wird. Der localStorage speichert nur Text, also kommt das Array als JSON hinein: JSON.stringify() wandelt es in Text um, und JSON.parse() wandelt den Text wieder in ein Array von Objekten um. Die Liste wird unter dem Schlüssel "produkte" gespeichert:

// Speichert die Liste im Browser
function speichereProdukte() {
    localStorage.setItem("produkte", JSON.stringify(produkte));
}

Die Liste muss jedes Mal gespeichert werden, wenn sie sich ändert. Bisher ändert sie sich an zwei Stellen: im Handler des Buttons Hinzufügen, der ein Produkt hinzufügt, und im Handler jedes Produkts, der es abhakt. Rufe speichereProdukte() in beiden direkt nach der Änderung auf.

Wenn die Seite geöffnet wird, sucht ladeProdukte() zuerst nach einer gespeicherten Liste. localStorage.getItem() gibt null zurück, wenn unter dem Schlüssel noch nichts gespeichert wurde, zum Beispiel beim ersten Öffnen der Seite. Wenn es eine gespeicherte Liste gibt, zeigt die Funktion sie an und endet mit return, sodass sie die Datei nur lädt, wenn nichts gespeichert wurde:

const gespeichert = localStorage.getItem("produkte");
if (gespeichert !== null) {
    produkte = JSON.parse(gespeichert);
    zeigeProdukte();
    return;
}

Hier behält die Vorschau, was die Seite speichert, solange du an der Übung arbeitest. Sobald etwas gespeichert ist, zeigt die Konsole einen Button, Gespeicherte Daten löschen, der die Seite wieder wie beim ersten Mal öffnet, ohne dass etwas gespeichert ist.

Typische Fehler:

• Das Array ohne JSON.stringify() speichern. Der localStorage enthält dann den Text [object Object],[object Object], und wenn die Seite geöffnet wird, schlägt JSON.parse() mit einem SyntaxError fehl. Korrigiere den Code und klicke auf Gespeicherte Daten löschen, damit die Seite den kaputten Text nicht mehr lädt.
• Ein anderer Schlüssel in setItem() und getItem(), etwa "produkte" und "liste". Die Seite findet dann nie, was sie gespeichert hat.