A localStorage mechanizmus egyfajta webes tárolási objektumot biztosít, amely lehetővé teszi az adatok tárolását és lekérését a böngészőben. Lejárat nélkül tárolhatja és hozzáférhet az adatokhoz; az adatok akkor is elérhetők lesznek, ha egy látogató bezárja az oldalt.

A localStorage-ot általában JavaScript használatával érheti el. Kis mennyiségű kóddal létrehozhat egy mintaprojektet, például egy pontszámszámlálót. Ez megmutatja, hogyan tárolhat és érhet el állandó adatokat csak az ügyféloldali kód használatával.

Mi az a localStorage a JavaScriptben?

A localStorage objektum a legtöbb webböngésző által támogatott webtárhely API része. Az adatokat kulcs-érték párokként tárolhatja a localStorage használatával. Az egyedi kulcsoknak és értékeknek UTF-16 DOM karakterlánc formátumban kell lenniük.

Ha objektumokat vagy tömböket szeretne tárolni, akkor azokat karakterláncokká kell konvertálnia a JSON.stringify() módszer. Legfeljebb 5 MB adatot tárolhat a localStorage-ban. Ezenkívül az összes azonos eredetű ablak megoszthatja az adott webhely helyi tárolási adatait.

instagram viewer

A böngésző akkor sem törli ezeket az adatokat, amikor a felhasználó bezárja. A későbbi munkamenet során elérhető lesz az azt létrehozó webhely számára. Azonban ne használja a localStorage alkalmazást érzékeny adatokhoz, mivel az ugyanazon az oldalon futó más szkriptek hozzáférhetnek hozzá.

localStorage vs. sessionStorage

Az localStorage és sessionStorage Az objektumok a kulcs-érték párokat helyileg tároló Web Storage API részét képezik. Minden modern böngésző támogatja mindkettőt. A localStorage használatával az adatok akkor sem járnak le, ha a felhasználó bezárja a böngészőjét. Ez eltér a sessionStorage-tól, amely törli az adatokat az oldal munkamenetének végén. Az oldalmunka akkor ér véget, amikor bezár egy lapot vagy ablakot.

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható. Ha szeretnéd megnézni a pontszámszámláló projekt élő változatát, akkor nézd meg az élőben demó.

Hogyan működik a localStorage?

A localStorage funkciót a következőn keresztül érheti el Window.localStorage ingatlan. Ez a tulajdonság számos metódust biztosít, például a setItem(), a getItem() és a removeItem(). Ezeket használhatja kulcs/érték párok tárolására, olvasására és törlésére.

Hogyan tároljunk adatokat a localStorage-ban

Az adatokat a localStorage-ban tárolhatja a setItem() módszer. Ez a módszer két argumentumot fogad el, a kulcsot és a megfelelő értéket.

window.localStorage.setItem('Piton', 'Guido van Rossum');

Itt, Piton a kulcs és Guido van Rossum az érték. Ha tömböt vagy objektumot szeretne tárolni, akkor azt stringgé kell konvertálnia. Egy tömböt vagy objektumot karakterláncmá alakíthat át a JSON.stringify() módszer.

ablak.localStorage.setItem('Python', 'Guido van Rossum');
const tanuló = {
 név: "Yuvraj",
 jelek: 85,
 tárgy: "Gépi tanulás"
}
const pontszámok = [76, 77, 34, 67, 88];
ablak.localStorage.setItem('result', JSON.stringify (tanuló));
ablak.localStorage.setItem('marks', JSON.stringify (pontszámok));

Adatok olvasása a localStorage-ból

Az adatokat a localStorage segítségével olvashatja ki getItem() módszer. Ez a metódus elfogadja a kulcsot paraméterként, és az értéket karakterláncként adja vissza.

hagyja adat1 = ablak.localStorage.getItem('Python');
hagyja adat2 = ablak.localStorage.getItem('result');
konzol.log (adat1);
konzol.log (adat2);

Ez a következő kimenetet eredményezi:

Guido van Rossum
{"név":"Yuvraj","jelek":85,"tantárgy":"Gépi tanulás"}

Ha az eredményt karakterláncból objektummá szeretné konvertálni, használja a JSON.parse() módszer.

hagyja adat2 = JSON.parse(ablak.localStorage.getItem('result'));
konzol.log (adat2);

A localStorage munkamenetek törlése

A localStorage munkameneteket törölheti a elem eltávolítása() módszer. A kulcs-érték pár törléséhez át kell adnia a kulcsot paraméterként ennek a metódusnak. Ha a kulcs létezik, a metódus törli a kulcs-érték párt, és ha a kulcs nem létezik, a metódus nem csinál semmit.

window.localStorage.removeItem('Piton');
window.localStorage.removeItem('C++');

Az összes elem törlése a localStorage-ból

A helyi tárhely összes elemét törölheti a egyértelmű() módszer. Ehhez a metódushoz nem kell paramétert átadnia.

ablak.helyi raktár.egyértelmű();

Hogyan lehet megtalálni a helyi tárhely hosszát

A localStorage hosszát a következővel találhatja meg localStorage.length ingatlan.

hagyja len = localStorage.length;
konzol.log (len);

Hogyan szerezzük meg a kulcsot egy adott pozícióban

A kulcsot egy adott pozícióba kaphatja a segítségével kulcs() módszer. Ez a módszer elfogadja az indexet paraméterként.

hagyja d = localStorage.key(1);
konzol.log (d);

A key() metódus elsősorban a localStorage összes elemének végigjátszására szolgál.

Hogyan léphet át az összes elemen a localStorage-ban

A localStorage összes elemét ismételheti a for ciklus használatával.

számára (hagyja i = 0; i < localStorage.length; i++){
hagyja kulcs = localStorage.key (i);
hagyja érték = localStorage.getItem (kulcs);
konzol.log (kulcs, érték);
}

A key() metódus elfogadja az indexet argumentumként, és visszaadja a megfelelő kulcsot. A getItem() metódus elfogadja a kulcsot argumentumként, és visszaadja a megfelelő értéket. Végül a console.log() metódus kiírja a kulcs-érték párt.

Egyszerű JavaScript-projekt a localStorage-on alapul

Alapvető módszereinek megértésével fejlődhet egy egyszerű JavaScript projekt a localStorage alapján. Ebben a projektben egy pontszámláló alkalmazást hoz létre, amely egy gombnyomással növeli és csökkenti a pontszámok számát. Ezenkívül olyan funkciókat kell megvalósítania, amelyek a localStorage összes elemét törölhetik.

Hozzon létre egy index.html és script.js fájlt egy új mappába, és nyissa meg a fájlokat kedvenc kódszerkesztőjében. Használja a következő HTML-kódot a pontszámláló alkalmazás felületének létrehozásához:

<!DOCTYPE html>
<html>
<test>
<h1>localStorage JavaScriptben</h1>
<gomb onclick="növekedésszámláló()" típus="gomb">Pontszám növelése</button>
<gomb onclick="csökkenésszámláló()" típus="gomb">Pontszám csökkentése</button>
<gomb onclick="clearCounter()" típus="gomb">Helyi tárhely törlése</button>
<p>Pontszám:</p>
<p id="pontszám"></p>
<p>Kattintson a "Pontszám növelése" gombot a pontszám növeléséhez</p>
<p>Kattintson a "Pontszám csökkentése" gombot a pontszám csökkentéséhez</p>
<p>Kattintson a "Helyi tárhely törlése" gombot a helyi tárhely törléséhez</p>
<p>
 Bezárhatja a böngésző lapot (vagy ablak), és próbálja meg újra.
 Látni fogja, hogy az adatok továbbra is megmaradnak ésvannem zárás után is elveszett
 a böngészőt.
</p>
<script src="script.js"></script>
</body>
</html>

Ez az oldal három gombot tartalmaz: Pontszám növelése, Pontszám csökkentése, és Helyi tárhely törlése. Ezek a gombok a növekedésszámláló(), csökkenésszámláló(), és clearCounter() funkciókat ill. Használja a következő kódot, hogy funkcionalitást adjon a pontszámszámláló alkalmazáshoz JavaScript használatával.

funkciónövelje Számláló() {
var szám = Szám(ablak.localStorage.getItem("count"));
 szám += 1;
 window.localStorage.setItem("számol", számol);
 document.getElementById("pontszám").innerHTML = szám;
}

Az növekedésszámláló() függvény a számlálást a getItem() metódussal kéri le. Az eredményt számmá alakítja, mivel a getItem() egy karakterláncot ad vissza, és a count változóban tárolja.

Amikor először kattint a Pontszám növelése gomb a setItem() hívása előtt lesz. A böngészője nem fogja megtalálni a számol kulcsot a localStorage-ban, így null értéket ad vissza. Mivel a Number() függvény nullát ad vissza nulla bemenet esetén, nincs szükség különleges esetkezelésre. A kód biztonságosan növelheti a számlálási értéket, mielőtt eltárolja és frissíti a dokumentumot az új érték megjelenítéséhez.

funkciócsökken Számláló() {
var szám = Szám(ablak.localStorage.getItem("count"));
 szám -= 1;
 window.localStorage.setItem("számol", számol);
 document.getElementById("pontszám").innerHTML = szám;
}

Az csökkenésszámláló() függvény ugyanúgy lekéri és ellenőrzi az adatokat növekedésszámláló() csinál. Csökkenti a számol változó 1-gyel, ami alapértelmezés szerint 0.

funkcióclearCounter() {
ablak.helyi raktár.egyértelmű();
 document.getElementById("pontszám").innerHTML = "";
}

Végül a clearCounter() funkció törli az összes adatot a localStorage-ból a egyértelmű() módszer.

Többet tehet a localStorage segítségével

A localStorage objektumnak számos metódusa van, köztük a setItem(), a getItem(), a removeItem() és a clear(). Míg a localStorage használata egyszerű, az érzékeny információk tárolása nem biztonságos. De jó választás olyan projektek fejlesztéséhez, amelyek nem igényelnek sok tárhelyet és nem tartalmaznak érzékeny információkat.

Szeretne egy másik localStorage alapú JavaScript projektet építeni? Íme egy alapvető teendőlista-alkalmazás, amelyet HTML, CSS és JavaScript használatával fejleszthet.