Az ügyféloldali tárolás elengedhetetlen a webalkalmazásokhoz. Lehet, hogy nem olyan golyóálló, mint a szerveroldali tároló, de enélkül a webalkalmazások sok modern funkciót nem tudnának megvalósítani. Mindenféle funkció az ügyféloldali tárhelytől függ, a játékmenetektől az e-kereskedelmi webhelyeken található bevásárlókosarakig.
Az ügyféloldali tárhely lehetővé teszi a webalkalmazások számára, hogy adatvédelmi központú architektúrát valósítsanak meg. Használhatja annak biztosítására, hogy az érzékeny adatok soha ne hagyják el a felhasználó eszközét.
Mi az az ügyféloldali tárolás?
A webfejlesztésben az ügyféloldali tárolás a webböngészők adattárolási módjaira utal. Egy alkalmazás ezután felhasználhatja ezeket az adatokat, hogy funkciókat biztosítson a felhasználóknak. Az ügyféloldali tárolás kritikus fontosságú néhány okból:
- A kliensen tárolt adatok lényegesen gyorsabban érhetők el, és az alkalmazás internet nélkül is hozzáférhet.
- Az ügyféloldali tárolás megkönnyíti az alkalmazás számára, hogy megjegyezze az egyes felhasználók beállításait.
- Egyes adatok állandó tárolása az ügyfélen megkönnyíti a felhasználók adatainak védelmét.
- Az összes alkalmazásadat tárolása a szerveren drága, különösen nagy méretekben.
A webalkalmazásokban többféle ügyféloldali tárolási forma is használható.
Cookie-k
A böngésző cookie egy kulcs/érték adat, amely karakterláncként tárolódik az Ön számítógépén. A böngészők minden kérésre elküldik az adott webhely összes cookie-ját a webhely szerverének. A cookie-k voltak az első (és egy ideig az egyetlen) típusú kliensoldali tárolás.
A sütik méretére vonatkozóan nincs hivatalos korlátozás, de az egyes böngészők eltérő mértékben korlátozzák a beállítható cookie-k méretét és számát. Az RFC 6265, 6.1. szakasz kimondja, hogy a böngészőknek (felhasználói ügynököknek) a következő minimális cookie-képességeket kell biztosítaniuk:
A praktikus felhasználói ügynök-megvalósítások korlátozzák a tárolható cookie-k számát és méretét. Az általános használatú felhasználói ügynököknek biztosítani KELL a következő minimális képességek mindegyikét:
- Cookie-nként legalább 4096 bájt (a cookie nevének, értékének és attribútumainak összegével mérve).
- Domainenként legalább 50 cookie.
- Összesen legalább 3000 süti.
A cookie-k különböző ideig maradhatnak a böngészőben. Egyesek az oldalmunka végén járnak le, és vannak olyanok, amelyek tetszőleges lejárati dátummal rendelkeznek, amelyek akár hónapokig is elnyúlhatnak a jövőbe.
A böngészők új lap megnyitásakor oldalmunkamenetet hoznak létre, és a lap vagy a böngésző bezárásakor befejezik. Ha újratölti vagy frissíti az oldalt, a böngésző nem fejezi be az oldal munkamenetét.
Használati esetek a cookie-khoz
A cookie-k a legalkalmasabbak olyan kis adatok tárolására, amelyeket a szervernek gyakran el kell olvasnia vagy módosítania kell. Miért?
- A cookie-k automatikusan csatolva vannak minden hálózati kéréshez
- A sütik csak kis mennyiségű karakterlánc adatot tudnak tárolni.
Cookie-k segítségével azonosíthatja a felhasználót (például munkamenet-azonosítót), könyvjelző célból rögzíthet egy oldallátogatást, vagy eltárolhatja egy játék rekordját.
Helyi raktár
A cookie-hoz hasonlóan a localStorage egy kulcs/érték tároló, amely karakterlánc-adatokat tárol. Bár mindkét tárolótípus hasonló, a localStorage és a cookie-k több szempontból is különböznek egymástól:
- A LocalStorage a JavaScripttől függ.
- A localStorage-ban lévő adatok elsősorban a böngészőben találhatók. Szándékosan el kell küldenie a szervernek, ahelyett, hogy a böngésző minden kérésre küldené.
- A LocalStorage-nak nincs lejárati dátuma. Addig marad az ügyfélen, amíg a fejlesztő nem törli JavaScript segítségével, vagy amíg a felhasználó ki nem törli a böngésző tárhelyét.
- A LocalStorage sokkal nagyobb tárolókapacitással rendelkezik. Az WHATWG specifikáció nem határoz meg kemény határt, de aszerint Wikipédia, a helyi tárhely minimális mérete a főbb böngészők között 5 MB:
A böngészők 4 kilobájtra korlátozzák a cookie-kat. A webtárhely sokkal nagyobb tárolókapacitást biztosít:
- Az Opera 10.50+ 5 MB-ot tesz lehetővé
- A Safari 8 5 MB-ot tesz lehetővé
- A Firefox 34 10 MB-ot tesz lehetővé
- A Google Chrome forrásonként 10 MB-ot engedélyez
- Az Internet Explorer tárterületenként 10 MB-ot tesz lehetővé
Használja a LocalStorage eseteit
A LocalStorage tökéletes nagy mennyiségű adat tárolására, amelyre a szervernek ritkán kell hivatkoznia. Ezek lehetnek egy alkalmazás felhasználói beállításai, a téma konfigurációs részletei vagy a nemrég kitöltött űrlap adatai. Ennek az az oka, hogy a localStorage sokkal nagyobb tárterülettel rendelkezik, mint a cookie-k, de több erőfeszítést kell tennie, hogy elküldje adatait a szervernek.
Ha az adatokat JSON-ként tárolja, akkor ésszerűen összetett adatokat tárolhat a localStorage használatával, annak ellenére, hogy csak karakterláncokat tud tárolni.
A LocalStorage sebezhető XSS támadások, ezért nem szabad érzékeny ügyféladatokat tárolni benne.
SessionStorage
A SessionStorage egy kulcs/érték tároló, amely működik majdnem ugyanaz, mint a localStorage, egy dolgot kivéve. A tárolt adatok csak az oldalmunka időtartama alatt maradnak meg.
Használja a SessionStorage eseteit
A SessionStorage segítségével ugyanolyan típusú adatokat tárolhat, mint a localStorage, de csak akkor, ha az adatoknak nem kell fennmaradniuk egy oldalmunkameneten túl.
IndexedDB
Az IndexedDB egy hatékony böngésző API nagy mennyiségű strukturált adat tárolására. Ez egy tranzakciós, objektum-orientált adatbázis, amely kulcs/érték párokban tárolja az adatokat.
Ha kisebb adatmennyiséggel dolgozik, a localStorage/sessionStorage a jobb és egyszerűbb választás. Sajnos a tárolási kapacitásuk és az a tény korlátozza őket, hogy csak karakterlánc-adatokat tárolhatnak. Az IndexedDB nemcsak különféle típusú adatok tárolását teszi lehetővé, beleértve a fájlokat/bináris adatokat, hanem sokkal több adat tárolására is képes. Az IndexedDB indexeket is készít a tartalmából, hogy lehetővé tegye a gyors keresést az adatbázisban.
Használja az IndexedDB eseteit
Az IndexedDB lényegében egy NoSQL adatbázis a böngészőben, és nagyon nagy mennyiségű adatot képes tárolni. Minden olyan használati eset, amely több mint 10 MB adat tárolását igényli, megfelelő az IndexedDB számára.
A böngészőtárolás egyéb formáitól eltérően az IndexedDB nem korlátozódik a karakterláncok tárolására. Az IndexedDB minden szabványos JavaScript típusú adatot képes tárolni. Ha egy webalkalmazást elsősorban offline működésre készít, az IndexedDB segítségével tárolhatja az alkalmazás összes adatát.
Az ügyféloldali tárolás rugalmas és hatékony
A kliensoldali tárolás kifejezés az alkalmazásadatok böngészőben való tárolására utal. Az ügyféloldali tárolás elengedhetetlen a legtöbb modern webalkalmazás működéséhez. Különféle típusú kliensoldali tárolás létezik: cookie-k, helyi/sessionStorage és IndexedDB.
A böngészőben tárolt összes tárolótípus kapacitása és a tárolható adatok típusa eltérő. A cookie-k a legkorlátozottabb típusok, a helyi/sessionStorage a legkényelmesebb, az IndexedDB pedig a legerősebb.