Arrays und Objekte speichern

Der localStorage speichert nur Text. Wenn du setItem() etwas anderes gibst, wandelt er es von selbst in Text um, und nicht immer so, dass du es gebrauchen kannst:

localStorage.setItem("buecher", ["Momo", "Matilda"]);
console.log(localStorage.getItem("buecher"));

localStorage.setItem("buch", { titel: "Momo" });
console.log(localStorage.getItem("buch"));

Momo,Matilda
[object Object]

Das Array ist zum Text Momo,Matilda geworden, der kein Array mehr ist, und das Objekt ist ganz verloren. Den Ausweg kennst du schon: JSON. Wenn du einen Wert speicherst, wandle ihn mit JSON.stringify() in JSON-Text um, und wenn du ihn liest, wandle ihn mit JSON.parse() wieder in ein Array oder Objekt um:

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

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

Wenn die Seite geöffnet wird, beginnt sie mit einem leeren Array (let buecher = [];) und ersetzt es durch das gespeicherte, falls es eins gibt. Die Prüfung auf null ist hier wichtig: JSON.parse(null) gibt null zurück, und das erste buecher.push() würde mit TypeError: Cannot read properties of null (reading 'push') enden.

Und wann soll die Seite speichern? Jedes Mal, wenn sich das Array ändert: nach dem Hinzufügen, Entfernen oder Ändern eines Eintrags. Am einfachsten schreibst du eine Funktion speichereBuecher() und rufst sie gleich nach jeder Änderung auf, neben dem Aufruf, der die Liste wieder anzeigt.

Typische Fehler:

• Speichern ohne JSON.stringify(). Es scheint zu funktionieren, aber wenn die Seite wieder geöffnet wird, endet JSON.parse("Momo,Matilda") mit einem SyntaxError.
• Speichern am Anfang des Skripts, bevor die gespeicherten Daten gelesen sind. Das überschreibt, was gespeichert war, mit einem leeren Array.