JavaScript nástroje: localStorage a sessionStorage

Pranay Kapgate2022-06-01 · 9 min read

JavaScript nástroje: localStorage a sessionStorage

JavaScript (často skracovaný ako JS) je jedným zo základov modernej webovej infraštruktúry. Je to ľahký, interpretovaný, objektovo orientovaný programovací jazyk, ktorý podporuje funkcie prvej triedy (first-class functions). JavaScript je známy najmä svojou implementáciou v dynamických webových stránkach. Vďaka svojim vlastnostiam sa však JavaScript používa aj v prostrediach mimo prehliadača.

V tejto príručke podrobne rozoberieme dva JavaScript objekty: localStorage a sessionStorage.

Prehľad localStorage a sessionStorage

Objekty localStorage a sessionStorage sú ponúkané ako súčasť rozhrania web storage API. Je to skvelý nástroj na lokálne ukladanie párov kľúč-hodnota. Používanie localStorage a sessionStorage je skvelou alternatívou k súborom cookies. Tento prístup ponúka niekoľko ďalších výhod:

Údaje sa ukladajú lokálne a server ich nemôže čítať. Tým sa eliminujú bezpečnostné problémy so súbormi cookies.
Umožňuje vyššiu kapacitu úložiska (až do 10 MB pre väčšinu moderných prehliadačov).
Jednoduchá a priamočiara syntax.

Tieto objekty sú podporované vo všetkých moderných webových prehliadačoch, takže s kompatibilitou prehliadačov nebude problém. Súbory cookies sú stále užitočné v mnohých situáciách, napríklad pri autentifikácii. Existujú však situácie, kedy localStorage a sessionStorage ponúkajú lepšie riešenia.

Požiadavky

Na vykonanie krokov uvedených v tomto návode budete potrebovať nasledujúce komponenty:

Správne nakonfigurovaný Linux server. Táto príručka demonštruje nastavenie vlastného Ubuntu servera na CloudSigma.
Node.js ako runtime prostredie pre JavaScript. Prečítajte si viac o inštalácii Node.js na Ubuntu tu.
Moderný webový prehliadač, napríklad Google Chrome alebo Firefox.

Na demonštráciu sme použili vzorovú webovú stránku s pripojeným JS skriptom. Viac informácií o pridaní JavaScriptu do HTML súboru nájdete tu:

tree_struct

VS 1

Pokiaľ ide o textový editor, budeme používať Visual Studio Code:

Web 1

Aký je rozdiel medzi localStorage a sessionStorage?

Oba localStorage a sessionStorage pochádzajú z rovnakého API. Ich správanie je tiež identické. Jediný rozdiel je v spôsobe, akým každý objekt umožňuje uchovávanie údajov. V prípade sessionStorage, údaje pretrvávajú, kým sa nezatvorí okno alebo karta. Pri localStorage, údaje pretrvávajú, kým sa nevymaže vyrovnávacia pamäť prehliadača alebo ich nevymaže samotná webová aplikácia.

V tomto návode sa zameriame hlavne na localStorage. Syntax pre sessionStorage je však rovnaká. Ukážeme si, ako vytvárať, čítať a aktualizovať páry kľúč/hodnota pomocou localStorage.

Krok 1 – Vytváranie záznamov

Záznam do objektu localStorage môžeme deklarovať pomocou setItem(). Táto metóda prijíma dva argumenty: kľúč a jeho zodpovedajúcu hodnotu. Štruktúra metódy je nasledovná:

localStorage.setItem(<key>, <value>)

1	localStorage.setItem(<key>, <value>)

V nasledujúcom príklade sme vytvorili premennú key. Pomocou metódy setItem() sme nastavili nový key a nastavili jeho hodnotu na ‘value’:

let key = 'item_1';
localStorage.setItem(key, 'value');

1 2	let key = 'item_1'; localStorage.setItem(key, 'value');

VS 2

Krok 2 – Čítanie záznamov

Ako teraz prečítame hodnotu uloženú v kľúči? Na získanie kľúča z localStorage, použijeme metódu getItem(). Prijíma názov kľúča a vracia hodnoty uložené v tomto kľúči. Použijeme metódu alert() na zobrazenie načítaného obsahu:

let myItem = localStorage.getItem(key);
alert(myItem);

1 2	let myItem = localStorage.getItem(key); alert(myItem);

VS 3

Potom otvorte webovú stránku vo webovom prehliadači. Mala by sa zobraziť hodnota uložená v key:

Web 2

Krok 3 – Aktualizácia záznamov

Po nastavení hodnoty to tak zostane, pokiaľ sa nezmení. Ak znova použijeme metódu setItem() na rovnaký key znova, automaticky to nahradí starú hodnotu novou.

V nasledujúcom príklade sa najprv key inicializuje s hodnotou ‘value’. Na ďalšom riadku sme znova zavolali setItem() a nastavili hodnotu na ‘novú hodnotu’:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.setItem(key, 'new value');
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.setItem(key, 'new value');

let myItem = localStorage.getItem(key);

alert(myItem);

VS 4

Pozrime sa, čo sa stane, keď tento kód spustíme v prehliadači:

Web 3

Ako môžeme vidieť, hodnota kľúča je nastavená na ‘novú hodnotu’.

Krok 4 – Odstránenie záznamov

Ak sa v localStorage (a takisto sessionStorage ktoré už nie sú potrebné, odporúča sa ich následne vymazať. Tým sa uvoľní viac miesta na neskoršie použitie. Aplikácia sa tak stane aj pamäťovo efektívnejšou.

Na odstránenie záznamu z localStorage, existuje vyhradená metóda removeItem(). Ako argument prijíma kľúč a odstráni ho z localStorage dátového úložiska:

localStorage.removeItem(<key_to_remove>)

1	localStorage.removeItem(<key_to_remove>)

Implementujme to v našom skripte:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.removeItem(key);
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.removeItem(key);

let myItem = localStorage.getItem(key);

alert(myItem);

VS 5

Po spustení bude výstupom null pretože neexistuje žiadna hodnota pre kľúč:

Web 4

Krok 5 – Vymazanie záznamov

V predchádzajúcom príklade sme odstránili iba jeden kľúč. Avšak localStorage umožňuje vymazať všetky uložené položky v jednom kroku. Na vymazanie všetkých záznamov ponúka localStorage metódu clear(). Neprijíma žiadny argument:

localStorage.clear();

1	localStorage.clear();

Uveďme túto metódu do praxe:

let key = 'item_1';
localStorage.setItem(key, 'value');
localStorage.clear();
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

localStorage.setItem(key, 'value');

localStorage.clear();

let myItem = localStorage.getItem(key);

alert(myItem);

VS 6

Rovnako ako predtým, odstráni všetky záznamy z localStorage, takže pri pokuse o prístup k hodnote pre kľúč to vráti null:

Web 5

Krok 6 – Práca s JSON

Ukladanie objektov a polí

Objekty localStorage a sessionStorage môžu ukladať iba reťazcové hodnoty. Niekedy však budete musieť pracovať s objektmi alebo poľami. V takom prípade ich musíme previesť na reťazec.

JavaScript prichádza s funkciou JSON.stringify() ktorá vezme pole/objekt a prevedie ho na reťazce. Tento príspevok poskytuje rýchly prehľad formátu JSON. Podrobnejší návod nájdete v článku JSON v JavaScripte.

V tomto príklade sme vytvorili objekt sampleObj s dvoma poliami name a location. Prevedieme ho na reťazec a uložíme ho do kľúča:

let key = 'item_1';
let sampleObj = { name: "Jason", location: "Sweden" };
localStorage.setItem(key, JSON.stringify(sampleObj));
let myItem = localStorage.getItem(key);
alert(myItem);

let key = 'item_1';

let sampleObj = { name: "Jason", location: "Sweden" };

localStorage.setItem(key, JSON.stringify(sampleObj));

let myItem = localStorage.getItem(key);

alert(myItem);

VS 7

Tu bude výstupom reťazec obsahujúci dáta objektu:

Web 6

Čítanie objektov a polí

Pri ukladaní sme objekty a polia previedli na reťazce. Tento reťazec môžeme vziať a previesť ho späť do pôvodného formátu. Na tento účel použijeme metódu JSON.parse(). Prijíma reťazec a prevádza ho späť do formátu JSON:

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, " "));

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, " "));

VS 8

Pokiaľ ide o výstup, znova sme ho previedli na reťazec a naformátovali pre lepší prehľad:

Web 7

Krok 7 – Kontrola položky v localStorage

V tejto časti si ukážeme jednoduchý test na zistenie, či localStorage a sessionStorage obsahujú nejakú položku alebo nie. Pomocou jednoduchého if príkazu môžeme skontrolovať dĺžku localStorage alebo sessionStorage. Ak tam sú položky, dĺžka bude väčšia ako 0.

Najprv implementujte nasledujúci príklad:

let key = 'item_1';
localStorage.setItem(key, 'new_value');
if(localStorage.length > 0){
alert('true');
}
else{
alert('false');
}

let key = 'item_1';

localStorage.setItem(key, 'new_value');

if(localStorage.length > 0){

alert('true');

}

else{

alert('false');

}

VS 9

Tu bude výstup ‘true’, pretože existuje jeden kľúč v localStorage:

Web 8

Krok 8 – Prechádzanie položiek

Objekty localStorage a sessionStorage ukladajú kľúče v štruktúre podobnej poľu. Nepodporujú metódu forEach, takže budeme musieť použiť klasickú techniku s použitím cyklu for na prechádzanie každej položky.

V nasledujúcom príklade skontrolujeme, či je localStorage prázdny alebo nie. Ak nie je prázdny, prejdeme každú položku:

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');
}

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');

}

VS 10

Výstup zobrazí všetky položky jednu po druhej:

Web 9

Krok 9 – Kontrola podpory prehliadača

Podporu pre localStorage (a sessionStorage) môžeme skontrolovať overením, či je k dispozícii v objekte window. Jednoduchý príkaz if to vyrieši:

if(window.localStorage){
alert(true);
}
else{
alert(false);
}

if(window.localStorage){

alert(true);

}

else{

alert(false);

}

VS 11

Spusťte kód vo webovom prehliadači:

Web 10

Záverečné myšlienky

Tento návod ukázal, ako používať objekty localStorage a sessionStorage v JavaScripte na ukladanie párov kľúč/hodnota v prehliadači. Práca s touto syntaxou je oveľa jednoduchšia. Ukázali sme si, ako vytvárať, odstraňovať a aktualizovať páry kľúč/hodnota. Venovali sme sa aj ukladaniu objektov a polí ich prevodom na reťazce (a naopak).

Ak si chcete ďalej prehĺbiť svoje znalosti JavaScriptu, môžete si pozrieť nasledujúce návody na našom blogu:

Príjemné programovanie!

Pranay Kapgate

Autor · CloudSigma

Preslav Dobrev je kreatívny dizajnér v spoločnosti CloudSigma, ktorý sa zameriava na konzistentnú firemnú identitu prostredníctvom tradičných a inovatívnych marketingových kanálov. Dokáže brilantne spájať umeleckú víziu so strategickým marketingom, čím vytvára pôsobivé príbehy značky.

JavaScript nástroje: localStorage a sessionStorage

Prehľad localStorage a sessionStorage

Požiadavky

Aký je rozdiel medzi localStorage a sessionStorage?

Krok 1 – Vytváranie záznamov

Krok 2 – Čítanie záznamov

Krok 3 – Aktualizácia záznamov

Krok 4 – Odstránenie záznamov

Krok 5 – Vymazanie záznamov

Krok 6 – Práca s JSON

Ukladanie objektov a polí

Čítanie objektov a polí

Krok 7 – Kontrola položky v localStorage

Krok 8 – Prechádzanie položiek

Krok 9 – Kontrola podpory prehliadača

Záverečné myšlienky

Pranay Kapgate

Komentáre