Ukládání v prohlížeči

Všechno, co si stránka pamatuje v proměnných, po jejím znovunačtení zmizí, protože skript běží znovu od začátku. Data ze serveru se načtou znovu, ta jsou na serveru. Ale vlastní věci uživatele, třeba jeho nastavení nebo filmy, které si označil, na serveru nejsou. Stránka si je musí pamatovat jinde.

K tomu má prohlížeč localStorage, malé úložiště, které v prohlížeči dostane každý web. Co si do něj stránka uloží, zůstane tam i po znovunačtení, a dokonce i po zavření prohlížeče. Je uložené v tomto prohlížeči na tomto počítači: ostatní lidé ho nevidí a stejný web v jiném prohlížeči také ne.

Hodnotu uložíte pod nějakým názvem, kterému se říká klíč, a později ji podle stejného klíče přečtete:

localStorage.setItem("barva", "zelená");
console.log(localStorage.getItem("barva"));
console.log(localStorage.getItem("velikost"));

localStorage.removeItem("barva");
console.log(localStorage.getItem("barva"));

zelená
null
null

• setItem(klic, hodnota) uloží hodnotu pod klíčem. Když už pod ním něco uložené je, nová hodnota to nahradí.
• getItem(klic) vrátí, co je pod klíčem uložené, nebo null, když nic. Hodnotu null, tedy „nic“, znáte z querySelector().
• removeItem(klic) klíč i s hodnotou smaže.

Při otevření si stránka přečte, co si uložila dřív. getItem() může vrátit null, a tak to nejdřív zkontrolujte:

const ulozenaBarva = localStorage.getItem("barva");
if (ulozenaBarva !== null) {
    barvaText.textContent = `Vaše oblíbená barva: ${ulozenaBarva}`;
}

Bez kontroly by nový návštěvník uviděl Vaše oblíbená barva: null.

V náhledu každé kliknutí na Spustit otevře stránku znovu, stejně jako znovunačtení, a stránka najde, co si uložila při dřívějších spuštěních, dokud máte cvičení otevřené. Jakmile si něco uloží, objeví se v konzoli tlačítko Smazat uložená data, které všechno smaže, jako by stránka nikdy otevřená nebyla. Smaže to i obnovení původního kódu (kulatá šipka vedle tlačítka Spustit).