JavaScript alati: localStorage i sessionStorage

Pranay Kapgate2022-06-01 · 9 min read

JavaScript alati: localStorage i sessionStorage

JavaScript (često skraćeno kao JS) jedan je od temelja moderne web infrastrukture. To je lagan, interpretiran, objektno orijentiran programski jezik koji podržava prvorazredne funkcije. JavaScript je uglavnom poznat po svojoj implementaciji u dinamičkim web stranicama. Međutim, zbog svojih značajki, JavaScript se također koristi u okruženjima izvan preglednika.

U ovom vodiču detaljno ćemo raspraviti o dva JavaScript objekta: localStorage i sessionStorage.

Pregled localStorage i sessionStorage

Objekti localStorage i sessionStorage nude se kao dio web storage API-ja. To je izvrstan alat za lokalnu pohranu parova ključ-vrijednost. Korištenje localStorage i sessionStorage izvrsna je alternativa kolačićima. Ovaj pristup nudi neke dodatne prednosti:

Podaci se pohranjuju lokalno i poslužitelj ih ne može čitati. To uklanja sigurnosne probleme s kolačićima.
Omogućuje veći kapacitet pohrane (do 10 MB za većinu modernih preglednika).
Jednostavna i jasna sintaksa.

Ovi su objekti podržani u svim modernim web preglednicima, tako da neće biti problema s kompatibilnošću preglednika. Kolačići su i dalje korisni u mnogim situacijama, na primjer, za autentifikaciju. Međutim, postoje situacije u kojima localStorage i sessionStorage nude bolja rješenja.

Preduvjeti

Za izvođenje koraka prikazanih u ovom vodiču trebat će vam sljedeće komponente:

Ispravno konfiguriran Linux poslužitelj. Ovaj vodič prikazuje postavljanje vlastitog Ubuntu poslužitelja na CloudSigma.
Node.js kao JavaScript runtime okruženje. Saznajte više o instaliranju Node.js-a na Ubuntu ovdje.
Moderan web preglednik, na primjer, Google Chrome ili Firefox.

Za demonstraciju smo uzeli uzorak web stranice s priloženom JS skriptom. Možete saznati više o dodavanju JavaScripta u HTML datoteku ovdje:

tree_struct

VS 1

Što se tiče uređivača teksta, koristit ćemo Visual Studio Code:

Web 1

Koja je razlika između localStorage i sessionStorage?

I localStorage i sessionStorage potječu iz istog API-ja. Njihovo ponašanje je također identično. Jedina razlika je u načinu na koji svaki objekt omogućuje postojanost podataka. U slučaju sessionStorage, podaci opstaju dok se prozor ili kartica ne zatvore. S localStorage, podaci opstaju dok se predmemorija preglednika ne očisti ili ih web aplikacija ne očisti.

U ovom vodiču uglavnom ćemo se usredotočiti na localStorage. Međutim, sintaksa za sessionStorage je ista. Prikazat ćemo kako stvoriti, čitati i ažurirati parove ključ/vrijednost pomoću localStorage.

Korak 1 – Stvaranje unosa

Možemo deklarirati unos u localStorage objekt pomoću setItem(). Ova metoda prima dva argumenta: ključ i njegovu odgovarajuću vrijednost. Struktura metode je sljedeća:

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

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

U sljedećem primjeru stvorili smo varijablu key. Pomoću metode setItem() postavili smo novi key i postavili njegovu vrijednost na ‘value’:

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

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

VS 2

Korak 2 – Čitanje unosa

Sada, kako čitamo vrijednost pohranjenu u ključu? Da bismo dohvatili ključ iz localStorage, koristit ćemo metodu getItem(). Ona prima naziv ključa i vraća vrijednosti pohranjene u ključu. Koristit ćemo metodu alert() za prikaz sadržaja koji dohvatimo:

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

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

VS 3

Zatim otvorite web stranicu u web pregledniku. Trebala bi prikazati vrijednost pohranjenu u key:

Web 2

Korak 3 – Ažuriranje unosa

Jednom kada je vrijednost postavljena, ostat će takva osim ako se ne promijeni. Ako ponovno upotrijebimo metodu setItem() na istom key automatski će zamijeniti staru vrijednost novom.

U sljedećem primjeru, key se najprije inicijalizira s vrijednošću ‘value’. U sljedećem retku ponovno smo pozvali setItem() i postavili vrijednost na ‘new value’:

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

Pogledajmo što se događa kada pokrenemo ovaj kod u pregledniku:

Web 3

Kao što možemo vidjeti, vrijednost ključa postavljena je na ‘nova vrijednost’.

Korak 4 – Brisanje unosa

Ako postoji više unosa u localStorage (kao i sessionStorage koji više nisu potrebni, preporučuje se očistiti ih nakon toga. To oslobađa više prostora za kasniju upotrebu. Aplikacija također postaje memorijski učinkovitija.

Za brisanje unosa iz localStorage, postoji namjenska metoda removeItem(). Ona prima ključ kao argument i uklanja ga iz localStorage skupa podataka:

localStorage.removeItem(<key_to_remove>)

1	localStorage.removeItem(<key_to_remove>)

Implementirajmo to u našu skriptu:

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

Kada se pokrene, izlaz prikazuje null jer ne postoji vrijednost za ključ:

Web 4

Korak 5 – Čišćenje unosa

U prethodnom primjeru uklonili smo samo jedan ključ. Međutim, localStorage omogućuje čišćenje svih pohranjenih stavki u jednom koraku. Za čišćenje svih unosa, localStorage nudi metodu clear(). Ona ne prima argumente:

localStorage.clear();

1	localStorage.clear();

Stavimo metodu u akciju:

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

Baš kao i prije, uklanja sve unose iz localStorage, pa kada pokušate pristupiti vrijednosti ključ, ona vraća null:

Web 5

Korak 6 – Rad s JSON-om

Pohranjivanje objekata i nizova

Objekti localStorage i sessionStorage mogu pohraniti samo tekstualne vrijednosti. Međutim, bit će trenutaka kada ćete morati raditi s objektima ili nizovima. U tom slučaju moramo ih pretvoriti u niz znakova.

JavaScript dolazi sa značajkom JSON.stringify() koja će uzeti niz/objekt i pretvoriti ga u nizove znakova. Ovaj post daje brzi pregled JSON formata. Za detaljniji vodič možete pročitati JSON u JavaScriptu.

U ovom primjeru stvorili smo objekt sampleObj s dva polja name i location. Pretvorit ćemo ga u niz znakova i pohraniti u ključ:

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

Ovdje će izlaz biti niz znakova koji sadrži podatke objekta:

Web 6

Čitanje objekata i nizova

Prilikom pohranjivanja, pretvorili smo objekte i nizove u nizove znakova. Ovaj niz znakova možemo također pretvoriti natrag u njegov izvorni format. Da bismo to učinili, koristit ćemo metodu JSON.parse(). Ona prima niz znakova i pretvara ga natrag u JSON format:

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

Što se tiče izlaza, ponovno smo ga pretvorili u niz znakova i formatirali radi boljeg pregleda:

Web 7

Korak 7 – Provjera stavke u localStorage

U ovom odjeljku prikazat ćemo jednostavan test kako bismo utvrdili postoji li localStorage i sessionStorage sadrži li neku stavku ili ne. Koristeći jednostavnu if naredbu, možemo provjeriti duljinu localStorage ili sessionStorage. Ako postoje stavke, duljina će biti veća od 0.

Prvo implementirajte sljedeći primjer:

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

Ovdje će izlaz biti ‘true’ jer postoji jedan ključ u localStorage:

Web 8

Korak 8 – Iteriranje kroz stavke

Objekti localStorage i sessionStorage pohranjuju ključeve u strukturu sličnu nizu. Oni ne podržavaju forEach metodu, pa ćemo morati slijediti klasičnu tehniku korištenja for petlje za iteriranje kroz svaku stavku.

U sljedećem primjeru provjerit ćemo je li localStorage prazan ili ne. Ako nije prazan, tada ćemo iterirati kroz svaku stavku:

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

Izlaz će prikazati sve stavke jednu po jednu:

Web 9

Korak 9 – Provjera podrške preglednika

Možemo provjeriti podršku za localStorage (i sessionStorage) provjerom je li dostupan na window objektu. Jednostavna if naredba će odraditi posao:

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

if(window.localStorage){

alert(true);

}

else{

alert(false);

}

VS 11

Pokrenite kod u web pregledniku:

Web 10

Završne misli

Ovaj vodič je pokazao kako koristiti localStorage i sessionStorage objekte u JavaScriptu za pohranu parova ključ/vrijednost u pregledniku. Sintakse su mnogo jednostavnije za rad. Prikazali smo kako stvoriti, ukloniti i ažurirati parove ključ/vrijednost. Također smo se pozabavili pohranjivanjem objekata i nizova pretvarajući ih u nizove znakova (i obrnuto).

Kako biste dodatno produbili svoje znanje o JavaScriptu, možete pogledati sljedeće vodiče s našeg bloga:

Sretno programiranje!

Pranay Kapgate

Autor · CloudSigma

Preslav Dobrev je kreativni dizajner u CloudSigma, usredotočen na dosljedan poslovni identitet korištenjem tradicionalnih i inovativnih marketinških kanala. Vješt je u spajanju umjetničke vizije sa strateškim marketingom kako bi stvorio dojmljive brendirane priče.

JavaScript alati: localStorage i sessionStorage

Pregled localStorage i sessionStorage

Preduvjeti

Koja je razlika između localStorage i sessionStorage?

Korak 1 – Stvaranje unosa

Korak 2 – Čitanje unosa

Korak 3 – Ažuriranje unosa

Korak 4 – Brisanje unosa

Korak 5 – Čišćenje unosa

Korak 6 – Rad s JSON-om

Pohranjivanje objekata i nizova

Čitanje objekata i nizova

Korak 7 – Provjera stavke u localStorage

Korak 8 – Iteriranje kroz stavke

Korak 9 – Provjera podrške preglednika

Završne misli

Pranay Kapgate

Komentari