JavaScript (často zkracovaný jako JS) je jedním ze základů moderní webové infrastruktury. Je to lehký, interpretovaný, objektově orientovaný programovací jazyk, který podporuje prvotřídní funkce (first-class functions). JavaScript je známý především pro svou implementaci v dynamických webových stránkách. Díky svým vlastnostem se však JavaScript používá i v neprohlížečových prostředích.
V této příručce podrobně probereme dva objekty JavaScriptu: localStorage a sessionStorage.
Přehled localStorage a sessionStorage
Objekty localStorage a sessionStorage jsou nabízeny jako součást rozhraní web storage API. Je to skvělý nástroj pro lokální ukládání párů klíč-hodnota. Použití localStorage a sessionStorage je skvělou alternativou k cookies. Tento přístup nabízí několik dalších výhod:
- Data jsou ukládána lokálně a server je nemůže číst. Tím se eliminují bezpečnostní problémy s cookies.
- Umožňuje vyšší kapacitu úložiště (až 10 MB pro většinu moderních prohlížečů).
- Jednoduchá a přímočará syntaxe.
Tyto objekty jsou podporovány ve všech moderních webových prohlížečích, takže nebude problém s kompatibilitou prohlížečů. Cookies jsou stále užitečné v mnoha situacích, například při autentizaci. Existují však situace, kdy localStorage a sessionStorage nabízejí lepší řešení.
Požadavky
K provedení kroků uvedených v tomto návodu budete potřebovat následující komponenty:
- Správně nakonfigurovaný Linux server. Tento návod ukazuje nastavení vlastního serveru Ubuntu na CloudSigma.
- Node.js jako běhové prostředí JavaScriptu. Další informace o instalaci Node.js na Ubuntu naleznete zde.
- Moderní webový prohlížeč, například Google Chrome nebo Firefox.
Pro účely ukázky jsme použili vzorovou webovou stránku s připojeným JS skriptem. Více informací o přidání JavaScriptu do HTML souboru naleznete zde:
Pokud jde o textový editor, budeme používat Visual Studio Code:
Jaký je rozdíl mezi localStorage a sessionStorage?
Jak localStorage, tak sessionStorage pocházejí ze stejného API. Jejich chování je také identické. Jediný rozdíl je ve způsobu, jakým každý objekt umožňuje uchování dat. V případě sessionStorage, data přetrvávají, dokud se nezavře okno nebo karta. U localStorage, data přetrvávají, dokud není vymazána mezipaměť prohlížeče nebo je nevymaže samotná webová aplikace.
V tomto návodu se zaměříme především na localStorage. Syntaxe pro sessionStorage je však stejná. Ukážeme si, jak vytvářet, číst a aktualizovat páry klíč/hodnota pomocí localStorage.
Krok 1 – Vytváření záznamů
Záznam do objektu localStorage můžeme deklarovat pomocí setItem(). Tato metoda přijímá dva argumenty: klíč a jeho odpovídající hodnotu. Struktura metody je následující:
|
1 |
localStorage.setItem(<key>, <value>) |
V následujícím příkladu jsme vytvořili proměnnou key. Pomocí metody setItem() jsme nastavili nový key a nastavili jeho hodnotu na ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Krok 2 – Čtení záznamů
Jak nyní přečteme hodnotu uloženou v klíči? Chceme-li získat klíč z localStorage, použijeme metodu getItem(). Ta přijímá název klíče a vrací hodnoty uložené v tomto klíči. Použijeme metodu alert() k zobrazení načteného obsahu:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Dále otevřete webovou stránku ve webovém prohlížeči. Měla by se zobrazit hodnota uložená v key:
Krok 3 – Aktualizace záznamů
Jakmile je hodnota nastavena, zůstane taková, dokud se nezmení. Pokud znovu použijeme metodu setItem() na stejný key znovu, automaticky nahradí starou hodnotu novou.
V následujícím příkladu je key nejprve inicializován s hodnotou ‘value’. Na dalším řádku jsme znovu zavolali setItem() a nastavili hodnotu na ‘new value’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Podívejme se, co se stane, když tento kód spustíme v prohlížeči:
Jak vidíme, hodnota klíče je nastavena na ‘new value’.
Krok 4 – Mazání záznamů
Pokud je v localStorage (a také v sessionStorage které již nejsou potřeba, doporučuje se je následně vymazat. Tím se uvolní více místa pro pozdější použití. Aplikace bude také paměťově efektivnější.
Chcete-li odstranit záznam z localStorage, existuje k tomu vyhrazená metoda removeItem(). Jako argument přijímá klíč a odstraní jej z localStorage úložiště dat:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Pojďme to implementovat v našem skriptu:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Při spuštění bude výstupem null protože neexistuje žádná hodnota pro klíč:
Krok 5 – Vymazání záznamů
V předchozím příkladu jsme odstranili pouze jeden klíč. Nicméně localStorage umožňuje vymazat všechny uložené položky v jediném kroku. Chcete-li vymazat všechny záznamy, localStorage nabízí metodu clear(). Nepřijímá žádný argument:
|
1 |
localStorage.clear(); |
Uveďme metodu do praxe:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Stejně jako předtím odstraní všechny záznamy z localStorage, takže při pokusu o přístup k hodnotě klíče, vrátí null:
Krok 6 – Práce s JSON
-
Ukládání objektů a polí
Objekty localStorage a sessionStorage mohou ukládat pouze řetězcové hodnoty. Někdy však budete muset pracovat s objekty nebo poli. V takovém případě je musíme převést na řetězec.
JavaScript přichází s funkcí JSON.stringify() která vezme pole/objekt a převede je na řetězce. Tento příspěvek poskytuje rychlý přehled formátu JSON. Podrobnější návod najdete v článku JSON v JavaScriptu.
V tomto příkladu jsme vytvořili objekt sampleObj se dvěma poli name a location. Převedeme jej na řetězec a uložíme jej pod klíč:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Zde bude výstupem řetězec obsahující data objektu:
-
Čtení objektů a polí
Při ukládání jsme objekty a pole převedli na řetězce. Tento řetězec můžeme vzít a převést jej zpět do původního formátu. K tomu použijeme metodu JSON.parse(). Přijímá řetězec a převádí jej zpět do formátu JSON:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Pokud jde o výstup, znovu jsme jej převedli na řetězec a naformátovali pro lepší přehlednost:
Krok 7 – Kontrola položky v localStorage
V této části si ukážeme jednoduchý test, kterým zjistíme, zda localStorage a sessionStorage obsahuje nějakou položku, nebo ne. Pomocí jednoduchého if příkazu můžeme zkontrolovat délku localStorage nebo sessionStorage. Pokud obsahuje položky, bude délka větší než 0.
Nejprve implementujte následující příklad:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Zde bude výstupem ‘true’ protože existuje jeden klíč v localStorage:
Step 8 – Krok 8 – Procházení položek
Objekty localStorage a sessionStorage ukládají klíče ve struktuře podobné poli. Nepodporují metodu forEach, takže budeme muset použít klasickou techniku s využitím cyklu for k procházení každé položky.
V následujícím příkladu zkontrolujeme, zda je localStorage prázdné, nebo ne. Pokud není prázdné, projdeme každou položku:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
Výstup zobrazí všechny položky jednu po druhé:
Krok 9 – Kontrola podpory prohlížeče
Podporu pro localStorage (a sessionStorage) můžeme zkontrolovat ověřením, zda je k dispozici v objektu window. Postačí k tomu jednoduchý if příkaz:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Spusťte kód ve webovém prohlížeči:
Závěrečné shrnutí
Tento návod ukázal, jak používat objekty localStorage a sessionStorage v JavaScriptu k ukládání párů klíč/hodnota v prohlížeči. Práce s jejich syntaxí je mnohem jednodušší. Ukázali jsme si, jak vytvářet, odebírat a aktualizovat páry klíč/hodnota. Zabývali jsme se také ukládáním objektů a polí jejich převodem na řetězce (a naopak).
Chcete-li si dále prohloubit své znalosti JavaScriptu, můžete se podívat na následující návody na našem blogu:
- Základy JavaScriptu: Jak pracovat s datem a časem
- JavaScript: Návod, jak indexovat, rozdělovat a manipulovat s řetězci
- Práce s JavaScriptem: Jak fungují třídy
- Práce s JavaScriptem: Jak fungují prototypy a dědičnost
Přejeme příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.