LocalStorage-mekanismen gir en type weblagringsobjekt som lar deg lagre og hente data i nettleseren. Du kan lagre og få tilgang til data uten utløpsdato; dataene vil være tilgjengelige selv etter at en besøkende lukker nettstedet ditt.
Du får vanligvis tilgang til localStorage ved å bruke JavaScript. Med en liten mengde kode kan du bygge et eksempelprosjekt, som en poengteller. Dette vil vise hvordan du kan lagre og få tilgang til vedvarende data kun ved å bruke kode på klientsiden.
Hva er localStorage i JavaScript?
LocalStorage-objektet er en del av weblagrings-APIet som de fleste nettlesere støtter. Du kan lagre data som nøkkelverdi-par ved å bruke localStorage. De unike nøklene og verdiene skal være i UTF-16 DOM-strengformatet.
Hvis du vil lagre objekter eller matriser, må du konvertere dem til strenger ved å bruke JSON.stringify() metode. Du kan lagre opptil 5 MB data i localStorage. Alle vinduer med samme opprinnelse kan også dele nettstedets lokale lagringsdata.
En nettleser vil ikke slette disse dataene selv når en bruker lukker den. Den vil være tilgjengelig for nettstedet som opprettet den under enhver fremtidig økt. Du bør imidlertid ikke bruke localStorage for sensitive data siden andre skript som kjører på samme side kan få tilgang til det.
localStorage vs. sessionStorage
De localStorage og sessionStorage objekter er en del av Web Storage API som lagrer nøkkelverdi-par lokalt. Alle moderne nettlesere støtter dem begge. Med localStorage utløper ikke dataene selv etter at en bruker lukker nettleseren. Dette skiller seg fra sessionStorage som sletter data når sideøkten avsluttes. En sideøkt avsluttes når du lukker en fane eller et vindu.
Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen. Hvis du vil ta en titt på en liveversjon av poengtellerprosjektet, kan du sjekke ut live demo.
Hvordan fungerer localStorage?
Du kan få tilgang til localStorage-funksjonaliteten gjennom Window.localStorage eiendom. Denne egenskapen gir flere metoder som setItem(), getItem() og removeItem(). Du kan bruke disse til å lagre, lese og slette nøkkel/verdi-par.
Hvordan lagre data i localStorage
Du kan lagre data i localStorage ved å bruke setItem() metode. Denne metoden godtar to argumenter, nøkkelen og den tilsvarende verdien.
window.localStorage.setItem('Python', 'Guido van Rossum');Her, Python er nøkkelen og Guido van Rossum er verdien. Hvis du vil lagre en matrise eller et objekt, må du konvertere det til en streng. Du kan konvertere en matrise eller et objekt til en streng ved å bruke JSON.stringify() metode.
vindu.localStorage.setItem('Python', 'Guido van Rossum');konst student = {
navn: "Yuvraj",
merker: 85,
emne: "Machine Learning"
}
konst score = [76, 77, 34, 67, 88];
vindu.localStorage.setItem('result', JSON.stringify (student));
vindu.localStorage.setItem('marks', JSON.stringify (score));
Hvordan lese data fra localStorage
Du kan lese data fra localStorage ved å bruke getItem() metode. Denne metoden godtar nøkkelen som en parameter og returnerer verdien som en streng.
la data1 = vindu.localStorage.getItem('Python');
la data2 = vindu.localStorage.getItem('result');
konsoll.log (data1);
konsoll.log (data2);
Dette gir følgende utgang:
Guido van Rossum
{"Navn":"Yuvraj","merker":85,"Emne":"Maskinlæring"}Hvis du vil konvertere resultatet fra en streng til et objekt, bør du bruke JSON.parse() metode.
la data2 = JSON.parse(vindu.localStorage.getItem('result'));
konsoll.log (data2);Slik sletter du lokale lagringsøkter
Du kan slette localStorage-økter ved å bruke fjerne gjenstand() metode. Du må sende nøkkelen som en parameter til denne metoden for å slette nøkkelverdi-paret. Hvis nøkkelen finnes, vil metoden slette nøkkel-verdi-paret, og hvis nøkkelen ikke eksisterer, vil metoden ikke gjøre noe.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Slik sletter du alle elementer i localStorage
Du kan slette alle elementer i lokal lagring ved å bruke klar() metode. Du trenger ikke sende noen parameter til denne metoden.
vindu.lokal lagring.klar();Hvordan finne lengden på lokal lagring
Du kan finne lengden på localStorage ved å bruke localStorage.length eiendom.
la len = localStorage.length;
konsoll.log (len);Hvordan få nøkkelen i en gitt posisjon
Du kan få nøkkelen på en gitt posisjon ved å bruke nøkkel() metode. Denne metoden aksepterer indeksen som en parameter.
la d = localStorage.key(1);
konsoll.log (d);Key()-metoden brukes først og fremst til å gå gjennom alle elementene i localStorage.
Slik går du gjennom alle elementene i localStorage
Du kan iterere over alle elementene i localStorage ved å bruke en for-løkke.
til (la jeg = 0; i < localStorage.length; i++){
la key = localStorage.key (i);
la verdi = localStorage.getItem (nøkkel);
konsoll.log (nøkkel, verdi);
}Key()-metoden aksepterer indeksen som et argument og returnerer den tilsvarende nøkkelen. GetItem()-metoden godtar nøkkelen som et argument og returnerer den tilsvarende verdien. Til slutt, den console.log() metoden skriver ut nøkkelverdi-paret.
Enkelt JavaScript-prosjekt basert på localStorage
Med en forståelse av dens grunnleggende metoder kan du utvikle deg et enkelt JavaScript-prosjekt basert på localStorage. I dette prosjektet skal du lage en poengteller-app som vil øke og redusere poengtellingen i henhold til et knappeklikk. Du vil også implementere funksjonalitet for å fjerne alle elementer i localStorage.
Opprett en index.html og script.js fil i en ny mappe og åpne filene i ditt favorittkoderedigeringsprogram. Bruk følgende HTML-kode for å lage et grensesnitt for poengteller-appen:
<!DOCTYPE html>
<html>
<kropp>
<h1>localStorage i JavaScript</h1>
<knappen onclick="øketeller()" type="knapp">Øk poengsummen</button>
<knappen onclick="redusereteller()" type="knapp">Reduser poengsummen</button>
<knappen onclick="clearCounter()" type="knapp">Tøm lokallagring</button>
<s>Poengsum:</s>
<p id="score"></s>
<s>Klikk på "Øk poengsummen" knappen for å øke poengtellingen</s>
<s>Klikk på "Reduser poengsummen" knappen for å redusere poengtellingen</s>
<s>Klikk på "Tøm lokallagring" for å tømme den lokale lagringen</s>
<s>
Du kan lukke nettleserfanen (eller vindu), og prøve en gang til.
Du vil se at dataene fortsatt vedvarer ogerikke tapt selv etter stenging
nettleseren.
</s>
<script src="script.js"></script>
</body>
</html>Denne siden inneholder tre knapper: Øk poengsummen, Reduser poengsummen, og Tøm lokallagring. Disse knappene kaller øketeller(), redusereteller(), og clearCounter() funksjoner hhv. Bruk følgende kode for å legge til funksjonalitet til poengteller-appen ved å bruke JavaScript.
funksjonøketeller() {
var telle = Antall(vindu.localStorage.getItem("count"));
telle += 1;
window.localStorage.setItem("telle", telle);
document.getElementById("score").innerHTML = telle;
}De øketeller() funksjonen henter tellingen ved å bruke getItem()-metoden. Den konverterer resultatet til et tall, siden getItem() returnerer en streng, og lagrer den i tellevariabelen.
Første gang du klikker på Øk poengsummen knappen vil være før ethvert kall til setItem(). Nettleseren din vil ikke finne telle nøkkel i localStorage, så den vil returnere en nullverdi. Siden Number()-funksjonen returnerer 0 for en null-inndata, trenger den ingen spesiell saksbehandling. Koden kan trygt øke telleverdien før den lagres og oppdaterer dokumentet for å vise den nye verdien.
funksjonredusereTeller() {
var telle = Antall(vindu.localStorage.getItem("count"));
telle -= 1;
window.localStorage.setItem("telle", telle);
document.getElementById("score").innerHTML = telle;
}De redusereteller() funksjonen henter og sjekker dataene akkurat som øketeller() gjør. Det reduserer telle variabel med 1, som standard er 0.
funksjonclearCounter() {
vindu.lokal lagring.klar();
document.getElementById("score").innerHTML = "";
}Sist, den clearCounter() funksjonen sletter all data fra localStorage ved hjelp av klar() metode.
Gjør mer med localStorage
LocalStorage-objektet har flere metoder inkludert setItem(), getItem(), removeItem() og clear(). Selv om localStorage er enkelt å bruke, er det ikke trygt å lagre sensitiv informasjon. Men det er et godt valg å utvikle prosjekter som ikke krever mye lagring og ikke involverer noen sensitiv informasjon.
Vil du bygge et annet lokalt lagringsbasert JavaScript-prosjekt? Her er en grunnleggende oppgaveliste-app som du kan utvikle ved hjelp av HTML, CSS og JavaScript.