Uložení seznamu

Přidejte položku a znovu klikněte na Spustit. Položka je pryč: když se stránka otevře, její skript začne od začátku a seznam se znovu načte ze souboru. Ve skutečném prohlížeči by to dopadlo stejně pokaždé, když byste stránku zavřeli nebo obnovili. Nákupní seznam, který zapomene, co jste do něj napsali, moc neposlouží, a tak si ho v tomto cvičení stránka bude ukládat.

Jak víte z lekce Data ze serveru, stránka si může data uložit v prohlížeči, do localStorage, a ta tam zůstanou, i když stránku zavřete. localStorage ukládá jen text, takže pole do něj vložíte jako JSON: JSON.stringify() z něj udělá text a JSON.parse() z textu zase pole objektů. Seznam se uloží pod klíčem "polozky":

// Uloží seznam v prohlížeči
function ulozPolozky() {
    localStorage.setItem("polozky", JSON.stringify(polozky));
}

Seznam je potřeba uložit pokaždé, když se změní. Zatím se mění na dvou místech: v obsluze tlačítka Přidat, která přidává položku, a v obsluze každé položky, která ji odškrtává. V obou zavolejte ulozPolozky(), hned za změnou.

Když se stránka otevře, nactiPolozky() se nejdřív podívá, jestli je seznam uložený. localStorage.getItem() vrátí null, když pod tím klíčem zatím nic uloženo není, třeba když se stránka otevírá poprvé. Když seznam uložený je, funkce ho ukáže a skončí pomocí return, takže soubor načte, jen když uložené nic není:

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

Náhled si tady pamatuje, co stránka uloží, dokud na cvičení pracujete. Jakmile je něco uložené, ukáže se u konzole tlačítko Smazat uložená data. To stránku otevře znovu, jako by to bylo poprvé, bez uložených dat.

Typické chyby:

• Uložení pole bez JSON.stringify(). V localStorage pak bude text [object Object],[object Object] a při otevření stránky skončí JSON.parse() chybou SyntaxError. Opravte kód a klikněte na Smazat uložená data, aby stránka přestala načítat rozbitý text.
• Jiný klíč v setItem() a v getItem(), třeba "polozky" a "seznam". Stránka pak nikdy nenajde, co uložila.