LocalStorage mehhanism pakub teatud tüüpi veebisalvestusobjekti, mis võimaldab teil brauseris andmeid salvestada ja tuua. Saate andmeid salvestada ja neile juurde pääseda ilma aegumiseta; andmed on saadaval ka pärast seda, kui külastaja teie saidi sulgeb.

Tavaliselt pääsete kohalikule salvestusruumile juurde JavaScripti abil. Väikese koguse koodiga saate koostada näidisprojekti, näiteks punktiloenduri. See näitab, kuidas saate püsivaid andmeid salvestada ja neile juurde pääseda, kasutades ainult kliendipoolset koodi.

Mis on JavaScriptis localStorage?

LocalStorage objekt on osa veebisalvestuse API-st, mida enamik veebibrausereid toetab. Rakenduse localStorage abil saate andmeid salvestada võtme-väärtuste paaridena. Unikaalsed võtmed ja väärtused peavad olema UTF-16 DOM-stringi vormingus.

Kui soovite objekte või massiive salvestada, peate need teisendama stringideks, kasutades JSON.stringify() meetod. LocalStorage'is saate salvestada kuni 5 MB andmeid. Samuti saavad kõik sama päritoluga aknad jagada selle saidi kohalikku salvestusruumi andmeid.

instagram viewer

Brauser ei kustuta neid andmeid isegi siis, kui kasutaja selle sulgeb. See on mis tahes tulevase seansi ajal saadaval veebisaidil, mis selle lõi. Siiski ei tohiks te tundlike andmete jaoks kasutada rakendust localStorage, kuna sellele pääsevad juurde ka teised samal lehel töötavad skriptid.

localStorage vs. sessionSalvestus

The localStorage ja sessionStorage objektid on osa Web Storage API-st, mis salvestab võtme-väärtuse paarid kohapeal. Kõik kaasaegsed brauserid toetavad neid mõlemaid. LocalStorage'i puhul ei aegu andmed isegi pärast seda, kui kasutaja oma brauseri sulgeb. See erineb sessionStorage'ist, mis kustutab andmed lehe seansi lõppedes. Leheseanss lõpeb, kui sulgete vahekaardi või akna.

Selles projektis kasutatav kood on saadaval a GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada. Kui soovite skooride loenduri projekti reaalajas versiooni vaadata, saate vaadata otseülekannet demo.

Kuidas localStorage töötab?

LocalStorage'i funktsioonile pääsete juurde läbi Window.localStorage vara. See atribuut pakub mitmeid meetodeid, nagu setItem(), getItem() ja removeItem(). Saate neid kasutada võtme/väärtuste paaride salvestamiseks, lugemiseks ja kustutamiseks.

Kuidas salvestada andmeid kohalikus salvestusruumis

Saate salvestada andmeid kohalikus salvestusruumis, kasutades setItem() meetod. See meetod aktsepteerib kahte argumenti, võtit ja vastavat väärtust.

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

Siin Python on võti ja Guido van Rossum on väärtus. Kui soovite salvestada massiivi või objekti, peate selle teisendama stringiks. Saate teisendada massiivi või objekti stringiks, kasutades JSON.stringify() meetod.

aken.localStorage.setItem('Python', 'Guido van Rossum');
konst õpilane = {
 nimi: "Yuvraj",
 märgid: 85,
 teema: "Masinõpe"
}
konst hinded = [76, 77, 34, 67, 88];
aken.localStorage.setItem('result', JSON.stringify (õpilane));
aken.localStorage.setItem('marks', JSON.stringify (skoorid));

Kuidas lugeda andmeid kohalikust salvestusruumist

Saate lugeda LocalStorage'i andmeid kasutades getItem() meetod. See meetod aktsepteerib võtme parameetrina ja tagastab väärtuse stringina.

lase andmed1 = aken.localStorage.getItem('Python');
lase andmed2 = aken.localStorage.getItem('result');
konsool.log (andmed1);
konsool.log (andmed2);

See annab järgmise väljundi:

Guido van Rossum
{"nimi":"Yuvraj","märgid":85,"teema":"Masinõpe"}

Kui soovite teisendada tulemuse stringist objektiks, peaksite kasutama JSON.parse() meetod.

lase andmed2 = JSON.parse(aken.localStorage.getItem('result'));
konsool.log (andmed2);

LocalStorage'i seansside kustutamine

LocalStorage'i seansse saate kustutada, kasutades eemalda üksus() meetod. Võtme-väärtuste paari kustutamiseks peate sellele meetodile andma võtme parameetrina. Kui võti on olemas, kustutab meetod võtme-väärtuse paari ja kui võtit pole, ei tee meetod midagi.

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

Kuidas kustutada kõik kohalikus salvestusruumis olevad üksused

Saate tühjendada kõik kohalikus mälus olevad üksused, kasutades selge () meetod. Sellele meetodile ei pea te ühtegi parameetrit edastama.

aken.localStorage.selge();

Kuidas leida kohaliku salvestusruumi pikkust

LocalStorage'i pikkuse saate vaadata kasutades localStorage.length vara.

lase len = localStorage.length;
konsool.log (len);

Kuidas saada võti antud kohas

Võtme saab antud asendisse, kasutades nuppu võti() meetod. See meetod aktsepteerib indeksi parameetrina.

lase d = localStorage.key(1);
konsool.log (d);

Meetodit key() kasutatakse peamiselt kõigi LocalStorage'i üksuste läbimiseks.

Kuidas kohalikus salvestusruumis kõiki üksusi läbi vaadata

Saate itereerida kõiki localStorage'i üksusi, kasutades for-tsüklit.

jaoks (lase i = 0; i < localStorage.length; i++){
lase võti = localStorage.key (i);
lase väärtus = localStorage.getItem (võti);
konsool.log (võti, väärtus);
}

Meetod key() aktsepteerib indeksi argumendina ja tagastab vastava võtme. Meetod getItem() aktsepteerib võtit argumendina ja tagastab vastava väärtuse. Lõpuks, console.log() meetod prindib võtme-väärtuse paari.

Lihtne JavaScripti projekt, mis põhineb kohalikul salvestusel

Selle põhimeetodite mõistmisel saate areneda lihtne JavaScripti projekt põhineb kohalikul salvestusel. Selles projektis loote tulemusloenduri rakenduse, mis suurendab ja vähendab punktide arvu vastavalt nupule klõpsamisele. Samuti rakendate funktsiooni kõigi kohalikus salvestusruumis olevate üksuste tühjendamiseks.

Loo an index.html ja script.js faili uude kausta ja avage failid oma lemmikkoodiredaktoris. Kasutage punktiloenduri rakenduse jaoks liidese loomiseks järgmist HTML-koodi:

<!DOCTYPE html>
<html>
<keha>
<h1>localStorage JavaScriptis</h1>
<nupp onclick="suurenda loendur()" tüüp="nuppu">Suurenda skoori</button>
<nupp onclick="vähenda loendur()" tüüp="nuppu">Vähenda skoori</button>
<nupp onclick="clearCounter()" tüüp="nuppu">Tühjendage kohalik salvestusruum</button>
<lk>Tulemus:</lk>
<p id="skoor"></lk>
<lk>Klõpsake nuppu "Suurenda skoori" nuppu skooride arvu suurendamiseks</lk>
<lk>Klõpsake nuppu "Vähenda skoori" nuppu skooride arvu vähendamiseks</lk>
<lk>Klõpsake nuppu "Tühjendage kohalik salvestusruum" nuppu kohaliku salvestusruumi tühjendamiseks</lk>
<lk>
 Saate sulgeda brauseri vahekaardi (või aken) ja proovi uuesti.
 Näete, et andmed on endiselt alles jaonmitte kadunud isegi pärast sulgemist
 brauser.
</lk>
<skript src="script.js"></script>
</body>
</html>

Sellel lehel on kolm nuppu: Suurenda skoori, Vähenda skoorija Tühjendage kohalik salvestusruum. Need nupud kutsuvad suurenda loendur(), vähenda loendur()ja clearCounter() funktsioonid vastavalt. Kasutage järgmist koodi, et lisada JavaScripti abil skoori loenduri rakendusele funktsioone.

funktsioonisuurenda Loendur() {
var arv = Number(aken.localStorage.getItem("count"));
 arv += 1;
 window.localStorage.setItem("loendama", loe);
 document.getElementById("skoor").innerHTML = loendus;
}

The suurenda loendur() Funktsioon hangib loenduse meetodi getItem() abil. See teisendab tulemuse numbriks, kuna getItem() tagastab stringi ja salvestab selle loendusmuutujasse.

Kui klõpsate esimest korda Suurenda skoori nupp on enne iga setItem() kutset. Teie brauser ei leia loendama klahvi localStorage, nii et see tagastab nullväärtuse. Kuna funktsioon Number() tagastab null-sisendi korral 0, ei vaja see erijuhtumeid. Kood võib enne selle salvestamist ja dokumendi värskendamist uue väärtuse kuvamiseks loendusväärtust ohutult suurendada.

funktsioonivähene Loendur() {
var arv = Number(aken.localStorage.getItem("count"));
 arv -= 1;
 window.localStorage.setItem("loendama", loe);
 document.getElementById("skoor").innerHTML = loendus;
}

The vähenda loendur() funktsioon hangib ja kontrollib andmeid täpselt nagu suurenda loendur() teeb. See vähendab loendama muutuja 1 võrra, mis vaikimisi on 0.

funktsiooniselgeLoendur() {
aken.localStorage.selge();
 document.getElementById("skoor").innerHTML = "";
}

Viimaseks, clearCounter() funktsioon kustutab kõik kohalikust salvestusest andmed, kasutades funktsiooni selge () meetod.

Tehke kohaliku salvestusega rohkem

LocalStorage objektil on mitu meetodit, sealhulgas setItem(), getItem(), removeItem() ja clear(). Kuigi LocalStorage'i on lihtne kasutada, ei ole tundliku teabe salvestamine ohutu. Kuid see on hea valik projektide arendamiseks, mis ei nõua palju salvestusruumi ega sisalda tundlikku teavet.

Kas soovite luua veel ühe kohaliku salvestusruumipõhise JavaScripti projekti? Siin on põhiline ülesannete loendi rakendus, mida saate arendada HTML-i, CSS-i ja JavaScripti abil.