# Lokális böngésző tárolók: Local Storage, Session Storage, IndexedDB, Web SQL, Cookies.

Az internetes kapcsolat gyakran szakadozhat, vagy akár tartósan meg is szűnhet, éppen ezért szükségszerű a webes alkalmazásokat úgy kell implementálni, hogy offline módon is megbízhatóan működjenek, ezáltal növelve a felhasználói élményt. Tegyük fel azt az esetet, amikor kitöltünk egy kérdőívet és az adatok véglegesítése előtt megszakad az internetes kapcsolat. Jó esetben az alkalmazásunk kiírja, hogy a kapcsolat megszakadt, rossz esetben pedig erről nem kapunk értesítést és kárba is veszik az eddig befektetett munkánk (nem mentődik el az adat a központi adatbázisba). Ebből az okból kifolyólag merült fel a lokális tároló koncepciója. Manapság a böngészők többsége számos beépített lokális tárolóval rendelkezik, ezek közül a leggyakrabban használtak a következőek:

• Local Storage

• Session Storage

• Cookies

• IndexedDB

• Web SQL

Mivel minden böngésző rendelkezik saját (elszeparált) lokális tárolókon, a tárolni kívánt információ kizárólag a kiválasztott böngészőben lesz elérhető, a többiben nem. Ezen felül az egyes számítógépek között se lesz megosztva az adatunk (mivel az információ lokális marad). Attól függően, hogy mit szeretnénk művelni a tárolt adatainkkal, tudunk új adatokat létrehozni, a meglévőeket módosítani és törölni. Elérkezett az ideje annak, hogy bemutassuk és összehasonlítsuk az egyes lokális tárolókat. A Local storage és a session storage működésük szempontjából rendkívül hasonlóan működnek, néhány tulajdonságot kivéve. Szemben a cookie-val, melynek szerepe teljesen eltér az előbb említett két tárolótól. Tárkapacitás szempontjából amíg a Local storage körübelül 10 mb-nyi és session storage küörübelül 5 mb-nyi adatot képes tárolni, addig a cookie jóval kisebb adat tárolására lett kitalálva (körübelül 4 kb). A cookie lokális tároló jóval hamarabb jelent meg, támogatottsága nem korlátozódik a HTML5-re, szerencsénkre azon böngészőkön is elérhetőek, amik támogatják a HTML4-et. A másik két lokális tároló támogatottsága kizárólag a HTML5 szabványra korlátozódik. Folytassuk az összehasonlítást egy böngészőn, hogy melyik lokális tároló miképp viselkedik, amennyiben új lapokat kezdünk el megnyitogatni. Vegyük példának a Google Chrome böngészőt. Cookie esetén a benne tárolt adat minden egyes megnyitott lapon elérhető lesz, ugyanazt a weboldalt megnyitva. Session storage esetén a benne tárolt adat csakis azon a lapon lesz elérhető, melyen jelenleg tartózkodunk, hiába keressük fel ugyanazt a weboldalt egy másik lapon. Folytassuk az összehasonlítást az adatok megőrzése tekintetében. Session storage esetén amint bezárunk a böngészőben egy olyan lapot ahol tároltunk egy hozzá tartozó adatot, az automatikusan törlődik. Local storage esetén függetlenül attól, hogy mely lapokat zárjuk be / nyitjuk meg, a weboldalhoz tartozó adatunk egészen addig megmarad, míg manuálisan ki nem töröljük. Cookie esetén mi magunk manuálisan beállíthatjuk lejárati időt. Amint ez az idő lejár automatikusan érvényteleníti magát, jobb esetben törlődik is. Folytassuk az összehasonlítást az adatok tárolásának tekintetében. Eddig úgy beszéltünk a lokális tárolókról, mintha kizárólag a kliens oldallal szinkronizálható. Ez nem teljesen igaz. Terjesszük ki az érvényességi hatókört a szerver oldalra. Az derül ki, hogy amíg a Local storage-nak és a Session storage-nak nincs szerepe a szerver oldalon szemben a Cookie-val, melynek talán az egyik legfontosabb tulajdonsága éppen az, hogy a szerver és a kliens oldal közti adatcserét ebben a formában ellássa. A kapacitása ebből az okból kifolyólag limitált. A lenti táblázatban összehasonlítottuk támogatottság, tárolás módja, kapacitás, elérhetőség, érvényesség és kéréssel el lehet küldeni szempontok szerint:

Ennyit az elméletről, következzen a gyakorlat. Kezdésnek definiáljunk néhány változót a Local storage-ban. Ahhoz, hogy elérhessük ezt a funkciót, meg kell hívni a window globális objektum localStorage tulajdonságát. Ez a lokális tároló számos tulajdonsággal és metódussal rendelkezik, melyek közül leggyakrabban használtak az alábbiak: getItem, keyremoveItem, setItem, clear. Ahhoz, hogy elmentsünk valamilyen adatot lokálisan, a setItem metódusát kell meghívni, mely két sztring-típusú paraméterrel rendelkezik: key és value. Ahhoz, hogy lekérjünk egy létező adatot a kulcs azonosítója alapján (melyhez a kívánt adat van társítva), a getItem metódust kell meghívni, mely egyetlen sztring-típusú paraméterrel rendelkezik: key. Amennyiben a hivatkozott kulcs nem létezik, egy null értékkel tér vissza. Ahhoz, hogy törölhessünk egy kívánt kulcs-érték párost, a removeItem nevezetű metódus áll a rendelkezésünkre, mely egyetlen sztring-típusú paraméterrel rendelkezik: key. Néhány konkrét példa keretén belül figyeljük meg, hogy pontosan mi történik.

// nev elmentése
window.localStorage.setItem('nev','Zoltan');
// nev kiolvasása
console.log(window.localStorage.getItem('nev'));  
//  Zoltan
// nev törlése
window.localStorage.removeItem('nev'));
console.log(window.localStorage.getItem('nev'));  
//  null

Folytassuk a tárgyalást a Session storage-al. Kezdésnek definiáljunk néhány változót a Session storage-ban. Ahhoz, hogy elérhessük ezt a funkciót, meg kell hívni a window globális objektum sessionStorage tulajdonságát. Ez a lokális tároló számos tulajdonsággal és metódussal rendelkezik, melyek közül leggyakrabban használtak az alábbiak: getItem, keyremoveItem, setItem, clear. Ahhoz, hogy elmentsünk valamilyen adatot lokálisan, a setItem metódusát kell meghívni, mely két sztring-típusú paraméterrel rendelkezik: key és value. Ahhoz, hogy lekérjünk egy létező adatot a kulcs azonosítója alapján (melyhez a kívánt adat van társítva), a getItem metódust kell meghívni, mely egyetlen sztring-típusú paraméterrel rendelkezik: key. Amennyiben a hivatkozott kulcs nem létezik, egy null értékkel tér vissza. Ahhoz, hogy törölhessünk egy kívánt kulcs-érték párost, a removeItem nevezetű metódus áll a rendelkezésünkre, mely egyetlen sztring-típusú paraméterrel rendelkezik: key. Néhány konkrét példa keretén belül figyeljük meg, hogy pontosan mi történik.

// nev elmentése
window.sessionStorage.setItem('nev','Zoltán');
// nev kiolvasása
console.log(window.sessionStorage.getItem('nev'));  
//  Zoltán
// nev törlése
window.sessionStorage.removeItem('nev'));
console.log(window.sessionStorage.getItem('nev'));  
//  null

Folytassuk a tárgyalást a cookie-val. Kezdésnek definiáljunk néhány változót a Session storage-ban. Ahhoz, hogy elérhessük ezt a funkciót, meg kell hívni a document globális objektum cookie tulajdonságát. Ahhoz, hogy létrehozzunk egy új cookie-t egy értékadással átadhatjuk a kulcs-érték párt (mint string) egyenlőségjellel evlálasztva őket. Ez a lokális tároló számos tulajdonsággal rendelkezik (alapértelmezett értékekkel), melyek közül leggyakrabban használtak az alábbiak: Domain, Path, Expiration, Size. Minden egyes property beállítását pontos vesszővel kell leválasztani az átadni kívánt string-en belül. Ahhoz, hogy lekérjünk egy létező adatot, balszerencsénkre a console.log() globális metódust kell meghívi. Néhány konkrét példa keretén belül figyeljük meg, hogy pontosan mi történik.

// nev és lejárat beállítása
document.cookie = `nev=Zoltán;expires=${new Date(2019,12,12).toUTCString()}`;