Lokalno skladištenje podataka browsera (sessionStorage, localStorage, cookies)

Uvod

Nedugo posle početnog upoznavanja sa web dizajnom i back-end programiranjem, programeri se prirodno susretnu sa potrebom za lokalnim skladištenjem podataka koje browseri koriste za prikaz sajtova.

Od browsera se očekuje da "upamte" da je korisnik prijavljen na određeni sajt, da sačuvaju prethodni sadržaj korpe pri online kupovini, boju pozadine i veličinu fonta koju je korisnik izabrao, kao i mnogo šta još.

Navedene opcije se svakako podrazumevaju (godinama unazad), ali, implementacija navedenih opcija ne dešava se "sama od sebe".

Da bi korisnici mogli da se služe opcijama koje smo prethodno opisali (kao i drugim srodnim opcijama), potrebno je omogućiti sajtovima da podatke smeštaju na računarima klijenata, preko kukija i lokalnih skladišta podataka.

Razlike između HTTP kukija i lokalnih skladišta

Verujemo da je čitaocima pojam HTTP "kolačića" ili "kukija" (eng. cookie), dobro poznat iz svakodnevne prakse. U pitanju je način za lokalno skladištenje podataka koje posećeni sajtovi čuvaju za svoje potrebe (ali, preciznije, kao što ćemo videti u nastavku, u pitanju je "jedan od načina").

Sam po sebi, kuki predstavlja string (tekstualni podatak), koji se kreira na serveru, šalje browseru i skladišti lokalno, međutim, u daljoj obradi podataka, kuki postaje deo HTTP zahteva koji se šalju serveru.

Prosto rečeno, svaki put kada se klijent obraća serveru, šalju se i kukiji koje je klijent prethodno primio od servera.

U očima mnogih pojedinaca koji se zanimaju za internet tehnologije, kukiji su (praktično i u opštem smislu), sinonim za lokalno skladištenje podataka o sajtovima, međutim, pomenuli smo već da upotreba kukija podrazumeva komunikaciju sa serverom, a u nastavku ćemo videti i to da procedura za čitanje i zapis kukija nije 'skroz trivijalna'.

Ali, pre svega (kao što smo takođe već nagovestili), kukiji nisu jedina opcija.

Za jednostavnije zahvate, mogu se koristiti lokalna skladišta browsera kojima se pristupa preko JavaScript-a (na vrlo jednostavan način, bez razmene podataka sa serverom).

Operacije sa lokalnim skladištem browsera preko JavaScript-a

Za sam početak, upoznaćemo se sa korišćenjem lokalnih skladišta na računaru klijenta, za šta se u JavaScript-u koriste objekti sessionStorage i localStorage.

Pomenuta dva objekta odlikuju se mnogim sličnostima i gotovo identičnom sintaksom za pozivanje komandi, ali, postoje naravno i razlike, i razlozi zašto se u različitim okolnostima koristiti jedna ili druga opcija:

sessionStorage - podaci su vezani za sesiju i brišu se pri zatvaranju browsera
localStorage - podaci ostaju zapisani u lokalnom skladištu browsera sve dok se ne obrišu ručno

Objekat sessionStorage može se (recimo) koristiti za pamćenje sadržaja tekstualnih polja u situacijama kada nije poželjno da se posle osvežavanja stranice sadržaj izgubi, dok se objekat localStorage može koristiti za pamćenje veličina fontova, boja elemenata koje je korisnik izabrao (i sl).

Skladištenje podataka

Skladištenje podataka (to jest upis), obavlja se preko funkcije setItem kojoj se kao argumenti predaju ključ i vrednost (identifikator preko koga je nadalje moguće obraćati se podatku, i sam podatak).

		
// Upis u skladište sessionStorage
// (koje je vezano za sesiju):
sessionStorage.setItem("boja_pozadine", "#2244ee");

// Upis u skladište localStorage
// (lokalno skladište browsera):
localStorage.setItem("boja_pozadine", "#2244ee");

Slika 1. - Metoda setItem, za upis podat(a)ka u lokalna skladišta browsera.

Čitanje podataka

Za čitanje podatka koji je već upisan, koristi se funkcija getItem kojoj se kao argument predaje ključ (koji je vezan za podatak):

		
// Čitanje podataka iz skladišta sessionStorage:
let bojaPozadine = sessionStorage.getItem("boja_pozadine");

// Čitanje podataka iz skladišta localStorage:
let bojaPozadine = localStorage.getItem("boja_pozadine");

// U oba slučaja, promenljiva bojaPozadine
// dobija vrednost "#2244ee"

Slika 2. - Metoda getItem, za čitanje podataka iz lokalnih skladišta browsera.

Uklanjanje podataka

Za uklanjanje podataka, koriste se sledeće funkcije:

removeItem (uz predavanje ključa) - ukoliko je potrebno ukloniti određeni pojedinačni podatak
clearAll - ukoliko je potrebno ukloniti sve podatke iz lokalnog skladišta

		
// Uklanjanje podataka iz skladišta sessionStorage:
sessionStorage.removeItem("boja_pozadine");

// Uklanjanje podataka iz skladišta localStorage:
localStorage.removeItem("boja_pozadine");

// U oba slučaja, podatak sa ključem
// bojaPozadine biće uklonjen.

// Ukoliko je potrebno isprazniti skladišta
// podataka u potpunosti, mogu se koristiti
// sledeći kodovi:

sessionStorage.clearAll();

// ... ili ....

localStorage.clearAll();

Slika 3. - Metode removeItem i clearAll, za uklanjanje podataka iz lokalnih skladišta browsera.

Podaci smešteni u sessionStorage ističu po zatvaranju browsera, dok podaci smešteni u localStorage (osim ako se sami za to 'ne pobrinemo') - ne ističu.

Rad sa kukijima je nešto složeniji.

Pored ključeva i vrednosti, potrebno je (pogotovo u okolnostima kada nas na to obavezuju sigurnosni razlozi), navesti i trenutak isteka, kao i to da li je u pitanju kuki koji se može čitati samo na serveru (a takođe se navodi i putanja na domenu za koju kuki važi).

U nastavku, pozabavićemo se obradom kukija u PHP-u i JavaScript-u.

Operacije sa kukijima u PHP-u

PHP, kao serverski jezik, nudi dobru podršku za kukije i raspolaže svim neophodnim funkcijama za manipulaciju kukijima.

Krenimo redom ...

Kreiranje i ažuriranje kukija

Za kreiranje kukija preko PHP-a, koristi se funkcija setcookie:

		
<?php
	setcookie(naziv, vrednost, trenutak_isteka, putanja);
?>

Slika 4. - PHP funkcija setcookie, preko koje se kreira kuki.

Da bismo bolje razumeli šta navedeni argumenti označavaju, pogledaćemo primer (objašnjenja su u komentarima):

		
<?php
	$boja_pozadine = "#44ee11";

	setcookie("boja_pozadine", $boja_pozadine, time() + 86400 * 30, "/");

	// ARGUMENTI SU:
	//
	// naziv:            naziv po kome se kuki nadalje može
	//                   prepoznavati (u konkretnom primeru,
	//                   naziv je "boja_pozadine")
	//
	// vrednost:         vrednost koja se upisuje u kuki (i koja
	//                   praktično predstavlja najvažniji argument),
	//                   biće vrednost promenljive $boja_pozadine
	//                   ("#44ee11")
	//
	// trenutak_isteka:  trenutak u kome kuki ističe, zadaje se
	//                   u sekundama, najčešće tako što se na
	//                   timestamp koji se očita preko funkcije
	//                   time(), dodaje određeni broj sekundi;
	//                   izlaz funkcije time() odgovara trenutnom
	//                   vremenu, a vrednost 86400 predstavlja
	//                   broj sekundi u jednom danu:
	//                   86400 = 24 * 60 * 60
	//                   .... što znači da kuki koji smo uzeli za
	//                   primer, ističe za 30 dana od trenutka kada
	//                   se pozove funkcija setcookie()
	//
	// putanja:          "/" - budući da je navedena korena putanja
	//                   servera, kuki praktično važi za ceo domen
	//
?>

Slika 5. - Poziv funkcije setcookie, sa detaljnim opisom argumenata.

Za ažuriranje kukija (na primer, ako korisnik promeni boju pozadine i sl), takođe se koristi funkcija setcookie, uz predavanje novih vrednosti:

		
<?php
	$boja_pozadine = "#332aff";

	setcookie("boja_pozadine", $boja_pozadine, time() + 86400 * 30, "/");

	// Sve je "isto", ali, ovoga puta se predaje vrednost:
	// "#332aff"
?>

Slika 6. - Ažuriranje kukija se takođe obavlja pozivanjem funkcije setcookie, pri čemu se kao prvi argument predaje naziv već postojećeg kukija, a kao drugi, nova vrednost.

Sada je kuki dostupan širom domena (svim stranicama sajta), i može mu se lako pristupiti.

Pristup kukijima

Za pristup kukijima koristi se superglobalna promenljiva $_COOKIE, sa odgovarajućim indeksima, koji (kao što verovatno i sami pretpostavljate), odgovaraju nazivima kukija koji su zadati pri pozivu funkcije setcookie.

Naravno, da bi sve imalo pravog smisla, pre nego što se pristupi kukiju - prvo treba proveriti da li kuki (uopšte) postoji, za šta se može koristiti (sada već dobro poznata) funkcija isset:

		
<?php
	// Podrazumevana boja pozadine je bela:
	
	$boja_pozadine = "#fff";
	$poruka        = "";
	
	if (isset($_COOKIE['boja_pozadine'])) {
		$boja_pozadine = $_COOKIE['boja_pozadine'];
	}
	
	echo "<font color='" . $boja_pozadine . "'>Ispis</font>";
?>

Slika 7. - Provera kukija preko funkcije isset, i pristup vrednosti kukija preko superglobalne promenljive $_COOKIE.

Uklanjanje kukija

Kukiji se uklanjaju na jednostavan način (koji je doduše i pomalo idiosinkratičan): poziva se funkcija setcookie, * ali, kao trenutak isteka zadaje se "trenutak u prošlosti".

		
<?php
	setcookie("boja_pozadine", "", 1, "/");

	// naziv:            Preko prvog argumenta, određuje se koji kuki
	//                   je predviđen za brisanje
	//
	// vrednost:         Prilično je svejedno koju ćemo vrednost
	//                   upisati, ali, pri brisanju kukija tipično se
	//                   kao vrednost zadaje prazna niska, što dodatno
	//                   sugeriše da je u pitanju operacija uklanjanja
	//
	// trenutak_isteka:  Ako se usmerimo na to da UNIX Timestamp za
	//                   20.03.2021 u 10h, koji je dobijen preko
	//                   funkcije time(), ima vrednost 1616230800, *
	//                   jasno je da timestamp sa vrednošću 1
	//                   označava - "trenutak u prošlosti"
	//
	// putanja:          Kuki važi za sve putanje na domenu
	//
	// * U pitanju je (naravno) vreme kada je kreiran članak koji čitate.
?>

Slika 8. - Uklanjanje kukija obavlja se preko funkcije za ažuriranje, tako što se kao vreme isteka zadaje 'trenutak u prošlosti'.

Za kraj odeljka koji se tiče operacija sa kukijima u PHP-u, ostaje nešto što se u praksi radi na samom početku - potrebno je proveriti da li browser (uopšte) dozvoljava kreiranje kukija.

Provera podržanosti kukija u browseru

Iako PHP nema specijalizovanu funkciju za proveru podržanosti kukija u browseru, provera se može obaviti na jednostavan način, u dva koraka:

prvi korak podrazumeva pokušaj kreiranja kukija sa određenim nazivom
u drugom koraku, proverava se da li je u prethodnom koraku kuki uspešno kreiran

		
<?php
	setcookie("proba", "proba kukija", time() + 3600, "/");

	if (isset($_COOKIE['proba'])) {
		echo "Čuvanje kukija je omogućeno.";

		// U praksi, u slučaju da je čuvanje kukija
		// omogućeno, nepotrebno je o tome
		// obaveštavati korisnika
	}
	else {
		echo "Čuvanje kukija nije dozvoljeno!";

		// U praksi, u slučaju da čuvanje kukija
		// nije omogućeno, potrebno je ipak naći
		// elegantniji način da se korisnik o tome
		// obavesti i (naravno) - potrebno je preduzeti
		// konkretnije korake
	}
?>

Slika 9. - Pomoćna skripta preko koje se može proveriti da li je podrška za kukije u browseru uključena (u pitanju je provera koja se mora obaviti, budući da korisnici u podešavanjima browsera mogu isključiti čuvanje kukija).

Takođe, u prethodnoj skripti, može se koristiti i drugačiji uslov ....

		
<?php
	
	// ....

	if (count($_COOKIE) > 0)
	
	// ....
?>

Slika 10. - Uslov iz prethodne skripte (slika #9), koji se može zapisati na drugi način.

.... što navodimo (iako je i prvi kod više nego adekvatan), pre svega iz razloga što verujemo da će mnogi čitaoci naći bolje i kreativnije načine da iskoriste mogućnost prebrojavanja postojećih kukija. :)

Pošto smo se kroz primere u PHP-u upoznali sa opštim principima čuvanja i obrade kukija, pogledaćemo kako se navedene operacije mogu obavljati u JavaScript-u.

Operacije sa kukijima u JavaScript-u

JavaScript (kao front-end jezik), * takođe nudi dobru podršku za rad sa kukijima, ali, oko nekih stvari se moramo potruditi nešto više nego što je to slučaj sa PHP-om.

Najbolje je, ipak, da navedenu situaciju shvatimo kao priliku da se dodatno upoznamo sa JavaScript-om i utvrdimo sve što smo do sada naučili (pogotovo kada je u pitanju rad sa nizovima).

Kreiranje kukija

Za kreiranje kukija preko JavaScript-a, koristi se funkcija cookie, po sledećem obrascu:

		
document.cookie = "naziv=vrednost; expires=datum; path=/";

Slika 11. - Opšti oblik naredbe za kreiranje kukija u JavaScript-u.

Iako je programski kod naizgled drugačiji, prepoznajemo princip sa kojim smo se upoznali u odeljku o kukijima u PHP-u: pri pozivu funkcije, predaje se naziv kukija, vrednost, vreme isteka i putanja.

Deluje jednostavno, međutim, kada je u pitanju datum, potrebno je uneti nisku (ne može se "na licu mesta" pozivati funkcija koja očitava datum, kao u PHP-u), i potrebno je koristiti specifičan format zapisa (koji ćemo prikazati na primeru timestamp-a koji odgovara početku UTC epohe) ....

		
Thu, 01 Jan 1970 00:00:00 UTC

Slika 12. - Format za zapis vremena (UTC), koji se u Javascript-u mora koristiti pri dodavanju kukija.

Format je jednostavan (sam po sebi), ali, pošto određivanje dana u nedelji ("Thu"), shodno datumu ("01 Jan 1970"), nije nešto što ljudi (tipično) mogu izvesti bez napora (čast izuzecima :)), definisaćemo pomoćnu funkciju preko koje se formatira niska koja predstavlja sadržaj kukija (naravno, uz korišćenje obaveznog formata za zapis datuma):

		
function formatiranjeKukija(naziv, vrednost, dani, sati, domen) {
	
	let datum = new Date();
	
	datum.setTime(datum.getTime() + (dani * 86400 + sati * 3600) * 1000);

	return 	naziv + "=" + "vrednost; " +
	       "expires=" + datum.toUTCString() + 
	       ((domen != "")? "; path=" + domen : "");
	//*/
}

Slika 13. - Pomoćna metoda za dodavanje kukija, preko koje se niska za dodavanje formatira automatski.

Princip je (kao što smo već nagovestili), skoro isti kao u prethodnom slučaju (kada smo koristili PHP), a izvedba je sledeća:

objekat klase Date (datum), služi za beleženje datuma
metoda getTime upisuje trenutni datum u objekat datum
na timestamp koji vrati metoda getTime, dodaju se i sledeće vrednosti:

dani * 86400 (broj dana * broj sekundi u jednom danu)
sati * 3600 (broj sati * broj sekundi u jednom satu)

Zbir poslednje dve vrednosti množi se sa 1000, budući da metoda setTime zapravo operiše sa milisekundama, a preko metode toUTCString biće kreirana niska u formatu koji je neophodno koristiti pri kreiranju kukija u JS-u

Ako sada pozovemo sledeći kod:

		
document.cookie = formatiranjeKukija("boja_pozadine", "#2244ee", 30, 0, "/");

Slika 14. - Poziv funkcije formatiranjeKukija, koja je definisana u prethodnom koraku.

.... novi kuki će biti postavljen.

Pristup kukijima

Pristup kukijima je (reklo bi se), najmanje jednostavna operacija kada je u pitanju rad sa kukijima u JavaScript-u.

Za pristup kukijima, JS omogućava samo to da se preuzmu svi kukiji (odjednom), u obliku niske, preko koda po sledećem obrascu ....

		
let kukiji = document.cookie;

Slika 15. - Prvi korak u radu sa kukijima u JS-u, podrazumeva pozivanje naredbi sa gornje slike.

.... pri čemu nastaje niska sledećeg formata (smatraćemo da sajt koristi tri kukija):

		
"naziv_1=vrednost_1"; naziv_2=vrednost_2; naziv_3=vrednost_3"

Slika 16. - Kod sa slike #15 vratiće nisku koja sadrži sve podatke o svim kukijima (koje sajt koristi).

Za primer ćemo uzeti da je naredba sa slike #15 vratila sledeći sadržaj:

		
"korisnik=darth_vader"; id=411; boja_pozadine=#2244ee"

Slika 17. - Konkretan primer očitavanja kukija preko funkcije document.cookie.

Delovi niske nisu direktno dostupni, međutim, budući da su delovi razdvojeni znakom tačka-zarez, niska se može pretvoriti u niz preko funkcije split ....

		
let kukiji_niz = kukiji.split(";");

Slika 18. - Za podelu niske koju vraća funkcija document.cookie, koristi se komanda split, pri čemu se kao rezultat dobija niz niski.

.... posle čega se ne mora više prolaziti kroz nisku, već se može pristupati pojedinačnim elementima (praktično, pojedinačnim kukijima):

		
[
	"korisnik=darth_vader",
    " id=411",
    " boja_pozadine=#2244ee"
]

Slika 19. - Primer niza niski koji se dobija korišćenjem komande split, posle poziva naredbe document.cookie.

Pri svakom obraćanju "pojedinačnim niskama" moguće je (ponovo preko funkcije split), kreirati pomoćnu promenljivu red; praktično - niz koji sadrži naziv kukija i pripadajuću vrednost:

		
let red = kukiji_niz[0].split("=");
// red  = [ "korisnik", "darth_vader" ];

red     = kukiji_niz[1].split("=");
// red  = [ " id", "411" ];

red     = kukiji_niz[2].split("=");
// red  = [ " boja_pozadine", "#2244ee" ];

Slika 20. - Pri ponovnom pozivu funkcije split (uz novi argument: "="), dobija se niz sa dva zasebna podatka (ili, u praktičnom smislu - "upravo ono što nam treba").

Pošto smo se upoznali sa svim detaljima, možemo napraviti jednostavnu funkciju koja će pronaći sadržaj određenog kukija (ili će ustanoviti da traženi kuki ne postoji):

		
function pronalazenjeKukija(naziv) {
	let kukiji     = document.cookie;
	let kukiji_niz = kukiji.split(";");

	// kukiji_niz = [
	//     "naziv_1=vrednost_1",
	//     " naziv_2=vrednost_2",
	//     " naziv_3=vrednost_3",
	//     ....
	//     " naziv_n=vrednost_n",
	// ];
		
	for (let i = 0; i < kukiji_niz.length; i++) {
		
		// kukiji_niz[i] = "naziv_i=vrednost_i";

		let red = kukiji_niz[i].trim().split("=");

		// red = [ "naziv_i", "vrednost_i" ];
		
		if (red[0] == naziv) {
			return red[1];
		}
	}

	return false;
}

Slika 21. - Skripta za pronalaženje vrednosti kukija preko zadatog naziva.

Čitaocima ostavljamo da gornju funkciju (koja je sama po sebi sasvim adekvatna), dodatno optimizuju.

Uklanjanje kukija

Za uklanjanje kukija koristi se poznati, jednostavni (i pomalo 'čudni') princip: poziva se metoda za dodavanje (tj. ažuriranje) kukija, u kojoj se poništava vrednost, i (takođe/ponovo), kao vreme isteka navodi se "trenutak u prošlosti".

Ako pozovemo sledeći kod:

		
document.cookie = "boja_pozadine=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Slika 22. - Uklanjanje kukija u JS-u, obavlja se po već poznatom principu: poziva se funkcija za ažuriranje, ukida se vrednost, a kao vreme isteka zadaje se 'trenutak u prošlosti'.

.... kuki će biti uklonjen.

Provera podržanosti kukija u browseru

Za razliku od prethodnih operacija, provera podržanosti kukija preko JavaScript-a, krajnje je jednostavna:

		
if (navigator.cookieEnabled) {
	alert("Čuvanje kukija je omogućeno.");

	// U praksi, u slučaju da je čuvanje kukija omogućeno,
	// nepotrebno je o tome obaveštavati korisnika
}
else {
	alert("Čuvanje kukija nije dozvoljeno!");

	// U praksi, u slučaju da je čuvanje kukija nije omogućeno,
	// potrebno je naći elegantniji način da se korisnik o tome
	// obavesti (i potrebno je preduzeti konkretnije korake).
}

Slika 23. - Preko JavaScript-a, lako se može proveriti da li je podrška za kukije u browseru uključena.

Sledeći koraci ....

Na kraju, pošto smo se upoznali sa mehanizmima za "trajno" čuvanje podataka iz browsera na računaru klijenta, možemo preći na sledeći (reklo bi se "prirodan") korak, to jest, primere koji se tipično vezuju za upotrebu lokalnih skladišta browsera.

U pitanju su: autentifikacija korisnika (čime smo se u velikoj meri već pozabavili u tutorijalu za kreiranje forme za prijavu), i autorizacija korisnika - što će biti tema jednog od narednih članaka ....

Autor članka Nikola Vukićević Za web portal codeblog.rs

Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.