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, kukiji su (praktično, i u opštem smislu), sinonim za lokalno skladištenje podataka o sajtovima, međutim, videli 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 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 mnoge sličnosti i gotovo identična sintaksa 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 browseralocalStorage
- 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).
Čitanje podataka
Za čitanje podatka koji je već upisan, koristi se funkcija getItem
kojoj se kao argument predaje ključ (koji je vezan za podatak):
Uklanjanje podataka
Za uklanjanje podataka, koriste se sledeće funkcije:
removeItem
(uz predavanje ključa) - ukoliko je potrebno ukloniti određeni pojedinačni podatakclearAll
- ukoliko je potrebno ukloniti sve podatke iz lokalnog skladišta
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 navode 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
:
Da bismo bolje razumeli šta navedeni argumenti označavaju, pogledaćemo primer (objašnjenja su u komentarima):
Za ažuriranje kukija (na primer, ako korisnik promeni boju pozadine i sl), takođe se koristi funkcija setcookie
, uz predavanje novih vrednosti:
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
:
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".
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
Takođe, u prethodnoj skripti, može se koristiti i drugačiji uslov ....
.... što navodimo (iako je prvi kod više nego adekvatan), pre svega iz razloga što verujemo da će č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 i 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:
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) ....
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):
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 objekatdatum
- 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:
.... 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:
.... pri čemu nastaje niska sledećeg formata (smatraćemo da sajt koristi tri kukija):
Za primer ćemo uzeti da je naredba sa slike #15 vratila sledeći sadržaj:
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
....
.... posle čega se ne mora više prolaziti kroz nisku, već se može pristupati pojedinačnim elementima (praktično, pojedinačnim kukijima):
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:
Primećujemo, u drugom i trećem nizu, da prva niska sadrži razmak na početku, što je neizbežno, ali i lako rešivo u daljoj obradi, preko funkcije trim
.
Pošto smo se upoznali sa svim detaljima, možemo napraviti jednostavnu funkciju koja će pronaći sadržaj određenog kukija (ili ustanoviti da traženi kuki ne postoji):
Čitaocima ostavljamo da gornju funkciju (koja je sama po sebi sasvim adekvatna), dodatno optimizuju.
Uklanjanje kukija
Za uklanjanje kukija koristi se poznati, jednostavni (ali 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:
.... 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:
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 ....