LocalStorage mehānisms nodrošina tīmekļa krātuves objekta veidu, kas ļauj saglabāt un izgūt datus pārlūkprogrammā. Jūs varat uzglabāt un piekļūt datiem bez derīguma termiņa beigām; dati būs pieejami pat pēc tam, kad apmeklētājs aizvērs jūsu vietni.
Vietējai krātuvei parasti piekļūstat, izmantojot JavaScript. Izmantojot nelielu koda daudzumu, varat izveidot projekta paraugu, piemēram, punktu skaitītāju. Tas parādīs, kā varat saglabāt un piekļūt pastāvīgiem datiem, izmantojot tikai klienta puses kodu.
Kas ir localStorage JavaScript?
LocalStorage objekts ir daļa no tīmekļa krātuves API, ko atbalsta lielākā daļa tīmekļa pārlūkprogrammu. Varat saglabāt datus kā atslēgu un vērtību pārus, izmantojot vietni Storage. Unikālajām atslēgām un vērtībām jābūt UTF-16 DOM virknes formātā.
Ja vēlaties saglabāt objektus vai masīvus, tie būs jāpārvērš par virknēm, izmantojot JSON.stringify() metodi. Vietējā krātuvē varat saglabāt līdz 5 MB datu. Turklāt visi logi ar vienu un to pašu izcelsmi var koplietot šīs vietnes vietējās krātuves datus.
Pārlūkprogramma neizdzēsīs šos datus pat tad, kad lietotājs to aizver. Tas būs pieejams vietnei, kas to izveidoja jebkurā turpmākajā sesijā. Tomēr nevajadzētu izmantot vietējo krātuvi sensitīviem datiem, jo tiem var piekļūt citi skripti, kas darbojas tajā pašā lapā.
vietējā krātuve vs. sessionStorage
The localStorage un sessionStorage objekti ir daļa no Web Storage API, kas lokāli saglabā atslēgu un vērtību pārus. Visas mūsdienu pārlūkprogrammas atbalsta tās abas. Izmantojot localStorage, datu derīguma termiņš nebeidzas pat pēc tam, kad lietotājs aizver pārlūkprogrammu. Tas atšķiras no sessionStorage, kas notīra datus, kad lapas sesija beidzas. Lapas sesija beidzas, aizverot cilni vai logu.
Šajā projektā izmantotais kods ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci. Ja vēlaties apskatīt rezultātu skaitītāju projekta tiešraidi, varat skatīt tiešraidi demo.
Kā darbojas vietējā krātuve?
Vietējai krātuves funkcionalitātei varat piekļūt, izmantojot Window.localStorage īpašums. Šis īpašums nodrošina vairākas metodes, piemēram, setItem(), getItem() un removeItem(). Varat tos izmantot, lai saglabātu, lasītu un dzēstu atslēgu/vērtību pārus.
Kā saglabāt datus vietējā krātuvē
Varat saglabāt datus lokālajā krātuvē, izmantojot setItem() metodi. Šī metode pieņem divus argumentus — atslēgu un atbilstošo vērtību.
window.localStorage.setItem('Python', 'Gvido van Rosums');Šeit, Python ir atslēga un Gvido van Rosums ir vērtība. Ja vēlaties saglabāt masīvu vai objektu, jums tas būs jāpārvērš par virkni. Masīvu vai objektu var pārvērst virknē, izmantojot JSON.stringify() metodi.
logs.localStorage.setItem('Python', 'Gvido van Rosums');konst students = {
nosaukums: "Yuvraj",
atzīmes: 85,
tēma: "Mašīnmācība"
}
konst punkti = [76, 77, 34, 67, 88];
logs.localStorage.setItem('rezultāts', JSON.stringify (students));
logs.localStorage.setItem('marks', JSON.stringify (rezultāti));
Kā nolasīt datus no vietējās krātuves
Varat nolasīt datus no vietējās krātuves, izmantojot getItem() metodi. Šī metode pieņem atslēgu kā parametru un atgriež vērtību kā virkni.
ļaut dati1 = logs.localStorage.getItem('Python');
ļaut dati2 = logs.localStorage.getItem('rezultāts');
konsole.log (dati1);
konsole.log (data2);
Tas rada šādu izvadi:
Gvido van Rosums
{"nosaukums":"Yuvraj","atzīmes":85,"priekšmets":"Mašīnmācība"}Ja vēlaties pārvērst rezultātu no virknes par objektu, jums vajadzētu izmantot JSON.parse() metodi.
ļaut dati2 = JSON.parse(logs.localStorage.getItem('rezultāts'));
konsole.log (data2);Kā dzēst vietējās krātuves sesijas
Vietējās krātuves sesijas varat izdzēst, izmantojot noņemt vienumu() metodi. Lai dzēstu atslēgas un vērtības pāri, šai metodei ir jānodod atslēga kā parametrs. Ja atslēga pastāv, metode izdzēsīs atslēgas un vērtības pāri, un, ja atslēgas nav, metode neko nedarīs.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Kā notīrīt visus vietējās krātuves vienumus
Varat notīrīt visus vietējās krātuves vienumus, izmantojot skaidrs () metodi. Šai metodei nav jānodod nekādi parametri.
logs.localStorage.skaidrs();Kā uzzināt vietējās krātuves ilgumu
Vietējās krātuves ilgumu varat uzzināt, izmantojot localStorage.length īpašums.
ļaut len = localStorage.length;
konsole.log (len);Kā iegūt atslēgu noteiktā vietā
Jūs varat iegūt atslēgu noteiktā pozīcijā, izmantojot atslēga () metodi. Šī metode pieņem indeksu kā parametru.
ļaut d = localStorage.key(1);
konsole.log (d);Atslēgas() metode galvenokārt tiek izmantota, lai pārvietotos cauri visiem vienumiem vietējā krātuvē.
Kā pārvietoties cauri visiem vietējā krātuves vienumiem
Varat atkārtot visus vietējās krātuves vienumus, izmantojot for cilpu.
priekš (ļaut i = 0; i < localStorage.length; i++){
ļaut atslēga = localStorage.key (i);
ļaut vērtība = localStorage.getItem (atslēga);
konsole.log (atslēga, vērtība);
}Metode key() pieņem indeksu kā argumentu un atgriež atbilstošo atslēgu. Metode getItem() pieņem atslēgu kā argumentu un atgriež atbilstošo vērtību. Visbeidzot, console.log() metode izdrukā atslēgas vērtību pāri.
Vienkāršs JavaScript projekts, kas balstīts uz vietējo krātuvi
Izprotot tās pamatmetodes, jūs varat attīstīties vienkāršs JavaScript projekts pamatojoties uz vietējoStorage. Šajā projektā jūs izveidosit rezultātu skaitītāja lietotni, kas palielinās un samazinās punktu skaitu, noklikšķinot uz pogas. Jūs arī ieviesīsit funkcionalitāti, lai notīrītu visus vietējā krātuves vienumus.
Izveidojiet an index.html un script.js failu jaunā mapē un atveriet failus savā iecienītākajā koda redaktorā. Izmantojiet šo HTML kodu, lai izveidotu interfeisu rezultātu skaitītāja lietotnei:
<!DOCTYPE html>
<html>
<ķermeni>
<h1>LocalStorage JavaScript</h1>
<poga onclick="palielināt skaitītāju()" tips="pogu">Palieliniet punktu skaitu</button>
<poga onclick="samazinājumsCounter()" tips="pogu">Samaziniet punktu skaitu</button>
<poga onclick="ClearCounter()" tips="pogu">Notīrīt vietējo krātuvi</button>
<lpp>Rezultāts:</lpp>
<p id="rezultāts"></lpp>
<lpp>Noklikšķiniet uz "Palieliniet punktu skaitu" pogu, lai palielinātu rezultātu skaitu</lpp>
<lpp>Noklikšķiniet uz "Samaziniet punktu skaitu" pogu, lai samazinātu rezultātu skaitu</lpp>
<lpp>Noklikšķiniet uz "Notīrīt vietējo krātuvi" pogu, lai notīrītu vietējo krātuvi</lpp>
<lpp>
Varat aizvērt pārlūkprogrammas cilni (vai logs), un mēģināt atkal.
Jūs redzēsit, ka dati joprojām ir pieejami unirnē zaudēja pat pēc slēgšanas
pārlūkprogrammā.
</lpp>
<skripts src="script.js"></script>
</body>
</html>Šajā lapā ir trīs pogas: Palieliniet punktu skaitu, Samaziniet punktu skaitu, un Notīrīt vietējo krātuvi. Šīs pogas izsauc palielināt skaitītāju(), samazinājumsCounter(), un ClearCounter() funkcijas. Izmantojiet šo kodu, lai pievienotu funkcionalitāti rezultātu skaitītāja lietotnei, izmantojot JavaScript.
funkcijupalielināt Skaitītājs() {
var skaits = Numurs(logs.localStorage.getItem("count"));
skaits += 1;
window.localStorage.setItem("skaitīt", skaitīt);
document.getElementById("rezultāts").innerHTML = skaits;
}The palielināt skaitītāju() funkcija izgūst skaitu, izmantojot metodi getItem(). Tas pārvērš rezultātu par skaitli, jo getItem() atgriež virkni un saglabā to skaitīšanas mainīgajā.
Pirmo reizi noklikšķinot uz Palieliniet punktu skaitu poga būs pirms jebkura setItem() izsaukšanas. Jūsu pārlūkprogramma neatradīs skaitīt taustiņu localStorage, tāpēc tas atgriezīs nulles vērtību. Tā kā funkcija Number() atgriež 0 nulles ievadei, tai nav nepieciešama īpaša gadījuma apstrāde. Kods var droši palielināt skaitīšanas vērtību pirms tā saglabāšanas un dokumenta atjaunināšanas, lai parādītu jauno vērtību.
funkcijusamazinājums Skaitītājs() {
var skaits = Numurs(logs.localStorage.getItem("count"));
skaits -= 1;
window.localStorage.setItem("skaitīt", skaitīt);
document.getElementById("rezultāts").innerHTML = skaits;
}The samazinājumsCounter() funkcija izgūst un pārbauda datus tāpat kā palielināt skaitītāju() dara. Tas samazina skaitīt mainīgais ar 1, kas pēc noklusējuma ir 0.
funkcijuskaidrs Skaitītājs() {
logs.localStorage.skaidrs();
document.getElementById("rezultāts").innerHTML = "";
}Pēdējais, ClearCounter() funkcija dzēš visus datus no vietējās krātuves, izmantojot skaidrs () metodi.
Paveiciet vairāk, izmantojot vietējo krātuvi
LocalStorage objektam ir vairākas metodes, tostarp setItem(), getItem(), removeItem() un clear(). Lai gan vietējā krātuve ir viegli lietojama, sensitīvas informācijas glabāšana nav droša. Taču tā ir laba izvēle, lai izstrādātu projektus, kuriem nav nepieciešama liela krātuve un kuri neietver sensitīvu informāciju.
Vai vēlaties izveidot citu vietējo krātuvi balstītu JavaScript projektu? Šeit ir pamata uzdevumu saraksta lietotne, ko varat izstrādāt, izmantojot HTML, CSS un JavaScript.