Ukládání polí a objektů

localStorage uchovává jen text. Když setItem() dáte něco jiného, převede si to na text sám, a ne vždy tak, aby se to dalo použít:

localStorage.setItem("knihy", ["Momo", "Matylda"]);
console.log(localStorage.getItem("knihy"));

localStorage.setItem("kniha", { nazev: "Momo" });
console.log(localStorage.getItem("kniha"));

Momo,Matylda
[object Object]

Z pole se stal text Momo,Matylda, který už pole není, a objekt se ztratil úplně. Jak na to, už víte: pomocí JSON. Při ukládání hodnotu převeďte na text pomocí JSON.stringify() a při čtení zpátky na pole nebo objekt pomocí JSON.parse():

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

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

Při otevření stránka začne s prázdným polem (let knihy = [];) a nahradí ho uloženým, pokud nějaké je. Kontrola null je tu důležitá: JSON.parse(null) vrátí null a první knihy.push() by skončilo chybou TypeError: Cannot read properties of null (reading 'push').

A kdy ukládat? Pokaždé, když se pole změní: po přidání, odebrání i změně položky. Nejjednodušší je napsat funkci ulozKnihy() a volat ji hned po každé změně, vedle volání, které seznam znovu vykreslí.

Časté chyby:

• Uložení bez JSON.stringify(). Vypadá to, že funguje, ale při dalším otevření stránky skončí JSON.parse("Momo,Matylda") chybou SyntaxError.
• Uložení na začátku skriptu, ještě než se uložená data přečtou. Tím se uložená data přepíšou prázdným polem.