JavaScript eszközök: localStorage és sessionStorage

Pranay Kapgate2022-06-01 · 9 min read

JavaScript eszközök: localStorage és sessionStorage

JavaScript (gyakran JS-ként rövidítve) a modern webes infrastruktúra egyik alapköve. Ez egy könnyű, értelmezett, objektumorientált programozási nyelv, amely támogatja az első osztályú függvényeket. A JavaScript leginkább a dinamikus weboldalakon való alkalmazásáról ismert. Funkcióinak köszönhetően azonban a JavaScriptet nem böngészős környezetben is használják.

Ebben az útmutatóban részletesen tárgyalunk két JavaScript-objektumot: localStorage és sessionStorage.

A localStorage és a sessionStorage áttekintése

A localStorage és sessionStorage objektumok a web storage API részeként érhetők el. Kiváló eszközök a kulcs-érték párok helyi tárolására. A localStorage és a sessionStorage használata nagyszerű alternatívája a sütiknek. Ez a megközelítés néhány további előnyt is kínál:

Az adatok helyben tárolódnak, és a szerver nem tudja olvasni őket. Ez kiküszöböli a sütikkel kapcsolatos biztonsági problémákat.
Nagyobb tárolókapacitást tesz lehetővé (a legtöbb modern böngésző esetében akár 10 MB-ot).
Egyszerű és egyértelmű szintaxis.

Ezeket az objektumokat minden modern webböngésző támogatja, így nem lesz probléma a böngészőkompatibilitással. A sütik továbbra is hasznosak számos helyzetben, például a hitelesítésnél. Vannak azonban olyan helyzetek, amikor a localStorage és a sessionStorage jobb megoldásokat kínálnak.

Előfeltételek

Az ebben az útmutatóban bemutatott lépések végrehajtásához a következő összetevőkre lesz szüksége:

Egy megfelelően konfigurált Linux szerver. Ez az útmutató bemutatja a saját Ubuntu szerver beállítását a CloudSigma-n.
Node.js mint JavaScript futtatókörnyezet. Tudjon meg többet a Node.js Ubuntu-ra történő telepítéséről itt.
Egy modern webböngésző, például a Google Chrome vagy a Firefox.

A bemutatóhoz egy minta weboldalt használtunk, amelyhez egy JS szkript van csatolva. Tudjon meg többet a JavaScript HTML-fájlhoz való hozzáadásáról itt:

tree_struct

VS 1

Szövegszerkesztőként a Visual Studio Code:

Web 1

Mi a különbség a localStorage és a sessionStorage között?

Mind a localStorage mind a sessionStorage ugyanabból az API-ból származnak. A viselkedésük is megegyezik. Az egyetlen különbség az, ahogyan az egyes objektumok lehetővé teszik az adatok megőrzését. A sessionStorage esetében az adatok az ablak vagy lap bezárásáig maradnak meg. A localStorage esetében az adatok mindaddig megmaradnak, amíg a böngésző gyorsítótárát ki nem ürítik, vagy a webalkalmazás nem törli azokat.

Ebben az útmutatóban leginkább a localStorage objektumra fogunk összpontosítani. Azonban a sessionStorage szintaxisa megegyezik. Bemutatjuk, hogyan hozhat létre, olvashat be és frissíthet kulcs/érték párokat a localStorage.

1. lépés – Bejegyzések létrehozása

Bejegyzést deklarálhatunk a localStorage objektumban a setItem() metódus használatával. Ez a metódus két argumentumot fogad: a kulcsot és a hozzá tartozó értéket. A metódus felépítése a következő:

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

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

A következő példában létrehoztunk egy key változót. A setItem() metódus használatával beállítottunk egy új key kulcsot, és az értékét a következőre állítottuk: ‘value’:

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

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

VS 2

2. lépés – Bejegyzések beolvasása

Most pedig hogyan olvassuk be a kulcsban tárolt értéket? Egy kulcs lekéréséhez a localStorage objektumból, a getItem() metódust fogjuk használni. Ez átveszi a kulcs nevét, és visszaadja a kulcsban tárolt értékeket. Az alert() metódust fogjuk használni a lekért tartalom megjelenítésére:

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

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

VS 3

Ezután nyissa meg a weboldalt egy webböngészőben. Meg kell mutatnia a következőben tárolt értéket: key:

Web 2

3. lépés – Bejegyzések frissítése

Miután egy érték beállításra került, az úgy is marad, hacsak meg nem változtatják. Ha újra a setItem() metódust használjuk ugyanazon a key kulcson, az automatikusan felülírja a régi értéket az újjal.

A következő példában a key először a következő értékkel lesz inicializálva: ‘value’. A következő sorban ismét meghívtuk a setItem() metódust, és az értéket a következőre állítottuk: ‘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

Lássuk, mi történik, ha futtatjuk ezt a kódot a böngészőben:

Web 3

Amint láthatjuk, a kulcs értéke a következőre van beállítva: ‘új érték’.

4. lépés – Bejegyzések törlése

Ha több bejegyzés is található a localStorage (és a sessionStorage is), amelyekre már nincs szükség, ajánlott utólag törölni őket. Ez több helyet szabadít fel a későbbi használatra. Az alkalmazás memóriahasználata is hatékonyabbá válik.

Egy bejegyzés törléséhez a localStorage tárolóból, létezik egy erre a célra szolgáló removeItem(). Ez a kulcsot veszi át argumentumként, és eltávolítja azt a localStorage adatbázisból:

localStorage.removeItem(<key_to_remove>)

1	localStorage.removeItem(<key_to_remove>)

Implementáljuk ezt a szkriptünkben:

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

Futtatáskor a kimenet a következőt mutatja: null, mert nem létezik érték a kulcshoz:

Web 4

5. lépés – Bejegyzések kiürítése

Az előző példában csak egy kulcsot távolítottunk el. Azonban a localStorage lehetővé teszi az összes tárolt elem törlését egyetlen lépésben. Az összes bejegyzés törléséhez a localStorage a következő metódust kínálja: clear(). Nem igényel argumentumot:

localStorage.clear();

1	localStorage.clear();

Tegyük működésbe a metódust:

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

Csakúgy, mint korábban, ez is eltávolítja az összes bejegyzést a localStorage tárolóból, így amikor megpróbáljuk elérni a kulcs értékét, a visszatérési érték null:

Web 5

6. lépés – Munka a JSON-nal

Objektumok és tömbök tárolása

A localStorage és a sessionStorage objektumok csak karakterlánc (string) értékeket tudnak tárolni. Azonban előfordulhatnak olyan esetek, amikor objektumokkal vagy tömbökkel kell dolgoznia. Ebben az esetben át kell alakítanunk őket karakterlánccá.

A JavaScript rendelkezik a JSON.stringify() funkcióval, amely fogja a tömböt/objektumot, és karakterlánccá alakítja azt. Ez a bejegyzés egy gyors áttekintést nyújt a JSON formátumról. Részletesebb útmutatóért olvassa el a JSON a JavaScriptben.

Ebben a példában létrehoztunk egy sampleObj objektumot két mezővel: name és location. Ezt átalakítjuk karakterlánccá, és elmentjük a kulcsba:

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

Itt a kimenet az objektum adatait tartalmazó karakterlánc lesz:

Web 6

Objektumok és tömbök olvasása

A tárolás során az objektumokat és tömböket karakterláncokká alakítottuk. Ezt a karakterláncot vissza is alakíthatjuk az eredeti formátumába. Ehhez a JSON.parse() metódust fogjuk használni. Ez fogad egy karakterláncot, és visszalakítja azt JSON formátumba:

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

Ami a kimenetet illeti, visszalakítottuk karakterlánccá, és megformáztuk a jobb láthatóság érdekében:

Web 7

7. lépés – Elem ellenőrzése a localStorage-ban

Ebben a részben egy egyszerű tesztet mutatunk be annak meghatározására, hogy a localStorage és a sessionStorage tartalmaz-e elemet vagy sem. Egy egyszerű if utasítással ellenőrizhetjük a localStorage vagy sessionStorage hosszát. Ha vannak elemek, a hossz nagyobb lesz, mint 0.

Először valósítsa meg a következő példát:

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

Itt a kimenet ‘true’ lesz, mert létezik egy kulcs a localStorage:

Web 8

8. lépés – Iterálás az elemeken

A localStorage és sessionStorage objektum tömbszerű struktúrában tárolja a kulcsokat. Nem támogatják a forEach metódust, így a klasszikus technikát kell követnünk, és egy for ciklust kell használnunk az egyes elemeken való iteráláshoz.

A következő példában ellenőrizzük, hogy a localStorage üres-e vagy sem. Ha nem üres, akkor végigiterálunk minden egyes elemen:

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

A kimenet egyenként mutatja majd az összes elemet:

Web 9

9. lépés – Böngészőtámogatás ellenőrzése

Ellenőrizhetjük a localStorage (és a sessionStorage) támogatását azáltal, hogy ellenőrizzük, elérhető-e a window objektumon. Egy egyszerű if utasítás megteszi a hatását:

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

if(window.localStorage){

alert(true);

}

else{

alert(false);

}

VS 11

Futtassa a kódot a webböngészőben:

Web 10

Záró gondolatok

Ez az útmutató bemutatta, hogyan használhatók a localStorage és sessionStorage objektumok a JavaScriptben kulcs-érték párok böngészőben történő tárolására. A szintaxisokkal sokkal egyszerűbb dolgozni. Bemutattuk, hogyan lehet kulcs-érték párokat létrehozni, eltávolítani és frissíteni. Foglalkoztunk az objektumok és tömbök tárolásával is, sztringgé alakítva őket (és fordítva).

A JavaScripttel kapcsolatos ismeretei további elmélyítéséhez tekintse meg a következő oktatóanyagokat a blogunkról:

Kellemes kódolást!

Pranay Kapgate

Szerző · CloudSigma

Preslav Dobrev a CloudSigma kreatív tervezője, aki hagyományos és innovatív marketingcsatornák segítségével következetes vállalati identitás kialakítására összpontosít. Kiemelkedően képes ötvözni a művészi látásmódot a stratégiai marketinggel, hogy hatásos márkatörténeteket hozzon létre.

JavaScript eszközök: localStorage és sessionStorage

A localStorage és a sessionStorage áttekintése

Előfeltételek

Mi a különbség a localStorage és a sessionStorage között?

1. lépés – Bejegyzések létrehozása

2. lépés – Bejegyzések beolvasása

3. lépés – Bejegyzések frissítése

4. lépés – Bejegyzések törlése

5. lépés – Bejegyzések kiürítése

6. lépés – Munka a JSON-nal

Objektumok és tömbök tárolása

Objektumok és tömbök olvasása

7. lépés – Elem ellenőrzése a localStorage-ban

8. lépés – Iterálás az elemeken

9. lépés – Böngészőtámogatás ellenőrzése

Záró gondolatok

Pranay Kapgate

Hozzászólások