Mehanizem localStorage zagotavlja vrsto predmeta spletnega shranjevanja, ki vam omogoča shranjevanje in pridobivanje podatkov v brskalniku. Podatke lahko shranjujete in do njih dostopate brez poteka; podatki bodo na voljo tudi, ko obiskovalec zapre vašo stran.

Do localStorage boste običajno dostopali z JavaScriptom. Z majhno količino kode lahko sestavite vzorčni projekt, kot je števec rezultatov. To bo pokazalo, kako lahko shranite in dostopate do trajnih podatkov samo z uporabo kode na strani odjemalca.

Kaj je localStorage v JavaScriptu?

Objekt localStorage je del API-ja za spletno shranjevanje, ki ga podpira večina spletnih brskalnikov. Podatke lahko shranite kot pare ključ-vrednost z uporabo localStorage. Enolični ključi in vrednosti morajo biti v obliki niza DOM UTF-16.

Če želite shraniti predmete ali nize, jih boste morali pretvoriti v nize z uporabo JSON.stringify() metoda. V localStorage lahko shranite do 5 MB podatkov. Prav tako lahko vsa okna z istim izvorom delijo podatke lokalne shrambe tega mesta.

instagram viewer

Brskalnik teh podatkov ne bo izbrisal, tudi ko ga uporabnik zapre. Spletnemu mestu, ki ga je ustvarilo, bo na voljo med katero koli prihodnjo sejo. Vendar pa ne smete uporabljati localStorage za občutljive podatke, saj lahko do njih dostopajo drugi skripti, ki se izvajajo na isti strani.

localStorage vs. sessionStorage

The localStorage in sessionStorage predmeti so del API-ja Web Storage, ki lokalno shranjuje pare ključ-vrednost. Vsi sodobni brskalniki podpirajo oboje. Pri localStorage podatki ne potečejo niti po tem, ko uporabnik zapre brskalnik. To se razlikuje od sessionStorage, ki izbriše podatke, ko se seja strani konča. Seja strani se konča, ko zaprete zavihek ali okno.

Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT. Če si želite ogledati živo različico projekta števca rezultatov, si lahko ogledate živo demo.

Kako deluje localStorage?

Do funkcije localStorage lahko dostopate prek Window.localStorage premoženje. Ta lastnost ponuja več metod, kot so setItem(), getItem() in removeItem(). Te lahko uporabite za shranjevanje, branje in brisanje parov ključ/vrednost.

Kako shraniti podatke v localStorage

Podatke lahko shranite v localStorage z uporabo setItem() metoda. Ta metoda sprejme dva argumenta, ključ in ustrezno vrednost.

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

tukaj, Python je ključ in Guido van Rossum je vrednost. Če želite shraniti matriko ali predmet, ga boste morali pretvoriti v niz. Matriko ali predmet lahko pretvorite v niz z uporabo JSON.stringify() metoda.

okno.localStorage.setItem('Python', 'Guido van Rossum');
konst študent = {
 ime: "Yuvraj",
 oznake: 85,
 predmet: "Strojno učenje"
}
konst rezultati = [76, 77, 34, 67, 88];
okno.localStorage.setItem('rezultat', JSON.stringify (študent));
okno.localStorage.setItem('oznake', JSON.stringify (točke));

Kako brati podatke iz localStorage

Podatke iz localStorage lahko berete z uporabo getitem() metoda. Ta metoda sprejme ključ kot parameter in vrne vrednost kot niz.

pustiti podatek1 = okno.localStorage.getItem('Python');
pustiti podatki2 = okno.localStorage.getItem('rezultat');
konzola.log (podatki1);
konzola.log (podatki2);

To ustvari naslednji rezultat:

Guido van Rossum
{"ime":"Yuvraj","oznake":85,"predmet":"Strojno učenje"}

Če želite rezultat pretvoriti iz niza v predmet, morate uporabiti JSON.parse() metoda.

pustiti podatki2 = JSON.parse(okno.localStorage.getItem('rezultat'));
konzola.log (podatki2);

Kako izbrisati seje localStorage

Seje localStorage lahko izbrišete z uporabo odstraniPredmet() metoda. Če želite izbrisati par ključ-vrednost, morate tej metodi posredovati ključ kot parameter. Če ključ obstaja, bo metoda izbrisala par ključ-vrednost in če ključ ne obstaja, metoda ne bo naredila ničesar.

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

Kako počistiti vse elemente v localStorage

Vse elemente v lokalnem pomnilniku lahko počistite z uporabo počisti() metoda. Tej metodi vam ni treba posredovati nobenega parametra.

okno.localStorage.jasno();

Kako najti dolžino localStorage

Dolžino localStorage lahko najdete z uporabo localStorage.length premoženje.

pustiti len = localStorage.length;
konzola.log (len);

Kako pridobiti ključ na določenem mestu

Ključ lahko dobite na določenem položaju z uporabo ključ() metoda. Ta metoda sprejme indeks kot parameter.

pustiti d = localStorage.key(1);
konzola.log (d);

Metoda key() se uporablja predvsem za pomikanje po vseh elementih v localStorage.

Kako brskati po vseh elementih v localStorage

Z zanko for lahko ponovite vse elemente v localStorage.

za (pustiti jaz = 0; i < localStorage.length; i++){
pustiti ključ = localStorage.key (i);
pustiti vrednost = localStorage.getItem (ključ);
konzola.log (ključ, vrednost);
}

Metoda key() sprejme indeks kot argument in vrne ustrezen ključ. Metoda getItem() sprejme ključ kot argument in vrne ustrezno vrednost. Nazadnje, console.log() metoda natisne par ključ-vrednost.

Preprost projekt JavaScript, ki temelji na localStorage

Z razumevanjem njegovih osnovnih metod se lahko razvijate preprost projekt JavaScript temelji na localStorage. V tem projektu boste ustvarili aplikacijo za števec rezultatov, ki bo povečala ali zmanjšala število rezultatov glede na klik gumba. Prav tako boste implementirali funkcijo za brisanje vseh elementov v localStorage.

Ustvarite index.html in script.js datoteko v novo mapo in odprite datoteke v svojem najljubšem urejevalniku kode. Uporabite to kodo HTML, da ustvarite vmesnik za aplikacijo za števec rezultatov:

<!DOCTYPE html>
<html>
<telo>
<h1>localStorage v JavaScriptu</h1>
<gumb onclick="PovečajŠtevec()" vrsta="gumb">Povečaj oceno</button>
<gumb onclick="zmanjšajŠtevec()" vrsta="gumb">Zmanjšaj rezultat</button>
<gumb onclick="clearCounter()" vrsta="gumb">Počisti localStorage</button>
<str>rezultat:</str>
<p id="rezultat"></str>
<str>Kliknite na "Povečaj oceno" gumb za povečanje števila točk</str>
<str>Kliknite na "Zmanjšaj rezultat" gumb za zmanjšanje števila točk</str>
<str>Kliknite na "Počisti localStorage" gumb, da počistite localStorage</str>
<str>
 Zavihek brskalnika lahko zaprete (oz okno), in poskusi ponovno.
 Videli boste, da podatki še vedno obstajajo injene izgubil tudi po zaprtju
 brskalnik.
</str>
<skript src="script.js"></script>
</body>
</html>

Ta stran vsebuje tri gumbe: Povečaj oceno, Zmanjšaj rezultat, in Počisti localStorage. Ti gumbi kličejo PovečajŠtevec(), zmanjšajŠtevec(), in clearCounter() funkcije oz. Uporabite naslednjo kodo za dodajanje funkcionalnosti aplikaciji za števec rezultatov z uporabo JavaScripta.

funkcijopovečati števec() {
var štetje = številka(okno.localStorage.getItem("štetje"));
 štetje += 1;
 window.localStorage.setItem("štetje", štetje);
 document.getElementById("rezultat").innerHTML = štetje;
}

The PovečajŠtevec() funkcija pridobi štetje z metodo getItem(). Rezultat pretvori v število, ker getItem() vrne niz in ga shrani v spremenljivko count.

Ko prvič kliknete na Povečaj oceno gumb bo pred katerim koli klicem funkcije setItem(). Vaš brskalnik ne bo našel štetje ključ v localStorage, tako da bo vrnil ničelno vrednost. Ker funkcija Number() vrne 0 za ničelni vnos, ne potrebuje posebne obravnave velikih in malih črk. Koda lahko varno poveča vrednost štetja, preden jo shrani in posodobi dokument za prikaz nove vrednosti.

funkcijopomanjšaj števec() {
var štetje = številka(okno.localStorage.getItem("štetje"));
 štetje -= 1;
 window.localStorage.setItem("štetje", štetje);
 document.getElementById("rezultat").innerHTML = štetje;
}

The zmanjšajŠtevec() funkcija pridobi in preveri podatke tako kot PovečajŠtevec() počne. Zmanjša štetje spremenljivko za 1, ki je privzeta vrednost 0.

funkcijoclearCounter() {
okno.localStorage.jasno();
 document.getElementById("rezultat").notranjiHTML = "";
}

Nazadnje, clearCounter() funkcija izbriše vse podatke iz localStorage z uporabo počisti() metoda.

Naredite več z localStorage

Objekt localStorage ima več metod, vključno z setItem(), getItem(), removeItem() in clear(). Čeprav je localStorage enostaven za uporabo, shranjevanje občutljivih informacij ni varno. Vendar je dobra izbira za razvoj projektov, ki ne zahtevajo veliko prostora za shranjevanje in ne vključujejo občutljivih podatkov.

Želite zgraditi še en JavaScript projekt, ki temelji na localStorage? Tukaj je osnovna aplikacija za seznam opravil, ki jo lahko razvijete z uporabo HTML, CSS in JavaScript.