LocalStorage mechanizmas suteikia tam tikro tipo žiniatinklio saugyklos objektą, leidžiantį saugoti ir gauti duomenis naršyklėje. Galite saugoti ir pasiekti duomenis be galiojimo pabaigos; duomenys bus prieinami net lankytojui uždarius jūsų svetainę.
Paprastai vietinę saugyklą pasieksite naudodami „JavaScript“. Turėdami nedidelį kodo kiekį galite sukurti projekto pavyzdį, pavyzdžiui, balų skaitiklį. Tai parodys, kaip galite saugoti ir pasiekti nuolatinius duomenis naudodami tik kliento kodą.
Kas yra „localStorage“ programoje „JavaScript“?
„localStorage“ objektas yra žiniatinklio saugyklos API, kurią palaiko dauguma žiniatinklio naršyklių, dalis. Duomenis galite saugoti kaip raktų ir reikšmių poras naudodami „localStorage“. Unikalūs raktai ir reikšmės turi būti UTF-16 DOM eilutės formatu.
Jei norite saugoti objektus ar masyvus, turėsite konvertuoti juos į eilutes naudodami JSON.stringify() metodas. Vietinėje saugykloje galite saugoti iki 5 MB duomenų. Be to, visi tos pačios kilmės langai gali bendrinti tos svetainės vietinės saugyklos duomenis.
Naršyklė neištrins šių duomenų net vartotojui ją uždarius. Jis bus pasiekiamas jį sukūrusioje svetainėje bet kurios būsimos sesijos metu. Tačiau neturėtumėte naudoti „localStorage“ neskelbtiniems duomenims, nes kiti scenarijai, veikiantys tame pačiame puslapyje, gali juos pasiekti.
LocalStorage vs. sessionStorage
The localStorage ir sessionStorage objektai yra žiniatinklio saugyklos API dalis, kuri saugo raktų ir reikšmių poras vietoje. Visos šiuolaikinės naršyklės palaiko jas abi. Naudojant localStorage, duomenų galiojimo laikas nesibaigia net vartotojui uždarius naršyklę. Tai skiriasi nuo sessionStorage, kuri išvalo duomenis pasibaigus puslapio seansui. Puslapio sesija baigiasi uždarius skirtuką arba langą.
Šiame projekte naudojamas kodas yra prieinamas a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją. Jei norite pažiūrėti tiesioginę balų skaitiklio projekto versiją, galite pažiūrėti tiesiogiai demo.
Kaip veikia „localStorage“?
„localStorage“ funkciją galite pasiekti naudodami Window.localStorage nuosavybė. Ši nuosavybė suteikia kelis metodus, tokius kaip setItem(), getItem() ir removeItem(). Galite juos naudoti norėdami saugoti, skaityti ir ištrinti raktų / reikšmių poras.
Kaip saugoti duomenis vietinėje saugykloje
Galite saugoti duomenis vietinėje saugykloje naudodami setItem() metodas. Šis metodas priima du argumentus – raktą ir atitinkamą reikšmę.
window.localStorage.setItem('Python', 'Guido van Rossum');Čia Python yra raktas ir Guido van Rossum yra vertė. Jei norite išsaugoti masyvą ar objektą, turėsite jį konvertuoti į eilutę. Galite konvertuoti masyvą arba objektą į eilutę naudodami JSON.stringify() metodas.
langas.localStorage.setItem('Python', 'Guido van Rossum');konst studentas = {
vardas: "Yuvraj",
ženklai: 85,
tema: „Mašininis mokymasis“
}
konst balai = [76, 77, 34, 67, 88];
langas.localStorage.setItem('result', JSON.stringify (studentas));
langas.localStorage.setItem('marks', JSON.stringify (balai));
Kaip nuskaityti duomenis iš vietinės saugyklos
Duomenis iš „localStorage“ galite nuskaityti naudodami getItem() metodas. Šis metodas priima raktą kaip parametrą ir grąžina reikšmę kaip eilutę.
leisti duomenys1 = langas.localStorage.getItem('Python');
leisti duomenys2 = langas.localStorage.getItem('result');
konsolė.log (duomenys1);
konsolė.log (duomenys2);
Taip gaunama tokia produkcija:
Guido van Rossum
{"vardas":"Yuvraj","ženklų":85,"tema":"Mašininis mokymasis"}Jei norite konvertuoti rezultatą iš eilutės į objektą, turėtumėte naudoti JSON.parse() metodas.
leisti duomenys2 = JSON.parse(langas.localStorage.getItem('result'));
konsolė.log (duomenys2);Kaip ištrinti „localStorage“ seansus
Galite ištrinti localStorage seansus naudodami pašalinti daiktą() metodas. Norėdami ištrinti rakto ir vertės porą, šiam metodui turite perduoti raktą kaip parametrą. Jei raktas yra, metodas ištrins rakto-reikšmių porą, o jei rakto nėra, metodas nieko nedarys.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Kaip išvalyti visus elementus vietinėje saugykloje
Galite išvalyti visus vietinėje saugykloje esančius elementus naudodami aišku () metodas. Šiam metodui nereikia perduoti jokių parametrų.
langas.vietinė parduotuvė.aišku();Kaip sužinoti vietinės saugyklos ilgį
Vietinės saugyklos ilgį galite sužinoti naudodami localStorage.ilgis nuosavybė.
leisti len = localStorage.length;
konsolė.log (len);Kaip gauti raktą tam tikroje padėtyje
Raktą tam tikroje padėtyje galite gauti naudodami Raktas() metodas. Šis metodas priima indeksą kaip parametrą.
leisti d = localStorage.key(1);
konsolė.log (d);Metodas „key()“ pirmiausia naudojamas norint peržiūrėti visus „localStorage“ elementus.
Kaip peržiūrėti visus vietinėje saugykloje esančius elementus
Galite kartoti visus „localStorage“ elementus naudodami „for“ kilpą.
dėl (leisti aš = 0; i < localStorage.length; i++){
leisti raktas = localStorage.key (i);
leisti reikšmė = localStorage.getItem (raktas);
konsolė.log (raktas, reikšmė);
}Key() metodas priima indeksą kaip argumentą ir grąžina atitinkamą raktą. Metodas getItem() priima raktą kaip argumentą ir grąžina atitinkamą reikšmę. Galiausiai, console.log() metodas atspausdina rakto-reikšmių porą.
Paprastas „JavaScript“ projektas, pagrįstas „localStorage“.
Suprasdami pagrindinius jo metodus, galite tobulėti paprastas JavaScript projektas remiantis vietine saugykla. Šiame projekte sukursite balų skaičiavimo programą, kuri padidins ir sumažins balų skaičių spustelėjus mygtuką. Be to, įdiegsite funkciją, kad išvalytumėte visus elementus vietinėje saugykloje.
Sukurti an index.html ir script.js failą naujame aplanke ir atidarykite failus mėgstamoje kodų rengyklėje. Norėdami sukurti balų skaitiklio programos sąsają, naudokite šį HTML kodą:
<!DOCTYPE html>
<html>
<kūnas>
<h1>localStorage JavaScript</h1>
<mygtukas onclick="padidinti skaitiklis()" tipas ="mygtuką">Padidinti balą</button>
<mygtukas onclick="sumažinti skaitiklį ()" tipas ="mygtuką">Sumažinti balą</button>
<mygtukas onclick="ClearCounter ()" tipas ="mygtuką">Išvalyti vietinę saugyklą</button>
<p>Rezultatas:</p>
<p id="balas"></p>
<p>Spustelėkite ant "Padidinti balą" mygtuką, kad padidintumėte taškų skaičių</p>
<p>Spustelėkite ant "Sumažinti balą" mygtuką, kad sumažintumėte taškų skaičių</p>
<p>Spustelėkite ant "Išvalyti vietinę saugyklą" mygtuką, norėdami išvalyti vietinę saugyklą</p>
<p>
Galite uždaryti naršyklės skirtuką (arba langas), ir bandyti vėl.
Pamatysite, kad duomenys vis dar išlieka iryrane prarado net uždarius
naršyklę.
</p>
<scenarijus src="script.js"></script>
</body>
</html>Šiame puslapyje yra trys mygtukai: Padidinti balą, Sumažinti balą, ir Išvalyti vietinę saugyklą. Šie mygtukai vadina padidinti skaitiklis(), sumažinti skaitiklį (), ir ClearCounter () funkcijas. Naudokite šį kodą, kad pridėtumėte balų skaitiklio programos funkcijų naudodami „JavaScript“.
funkcijapadidinti Skaitliukas() {
var skaičiuoti = Skaičius(langas.localStorage.getItem("count"));
skaičiuoti += 1;
window.localStorage.setItem("skaičiuoti", skaičiuoti);
document.getElementById("balas").innerHTML = skaičius;
}The padidinti skaitiklis() funkcija nuskaito skaičių naudodama getItem() metodą. Jis konvertuoja rezultatą į skaičių, nes getItem() grąžina eilutę ir išsaugo ją skaičiavimo kintamajame.
Pirmą kartą spustelėjus Padidinti balą mygtukas bus prieš bet kokį setItem() iškvietimą. Jūsų naršyklė neras skaičiuoti klavišą localStorage, todėl jis grąžins nulinę reikšmę. Kadangi funkcija Number() grąžina 0, kai įvestis yra nulinė, jai nereikia jokių specialių atvejų tvarkymo. Kodas gali saugiai padidinti skaičiavimo reikšmę prieš jį išsaugant ir atnaujinant dokumentą, kad būtų rodoma nauja vertė.
funkcijasumažinti Skaitliukas() {
var skaičiuoti = Skaičius(langas.localStorage.getItem("count"));
skaičius -= 1;
window.localStorage.setItem("skaičiuoti", skaičiuoti);
document.getElementById("balas").innerHTML = skaičius;
}The sumažinti skaitiklį () funkcija nuskaito ir tikrina duomenis taip pat kaip padidinti skaitiklis() daro. Tai sumažina skaičiuoti kintamasis 1, kuris pagal numatytuosius nustatymus yra 0.
funkcijaClearCounter() {
langas.vietinė parduotuvė.aišku();
document.getElementById("balas").innerHTML = "";
}Paskutinis, ClearCounter () funkcija ištrina visus duomenis iš localStorage, naudodama aišku () metodas.
Padarykite daugiau naudodami vietinę saugyklą
LocalStorage objektas turi kelis metodus, įskaitant setItem(), getItem(), removeItem() ir clear(). Nors „localStorage“ lengva naudoti, nesaugu saugoti neskelbtiną informaciją. Tačiau tai yra geras pasirinkimas kuriant projektus, kuriems nereikia daug saugyklos vietos ir kuriuose nėra jokios neskelbtinos informacijos.
Norite sukurti kitą „LocalStorage“ pagrįstą „JavaScript“ projektą? Štai pagrindinė užduočių sąrašo programa, kurią galite sukurti naudodami HTML, CSS ir JavaScript.
