LocalStorage-mekanismen giver en type weblagringsobjekt, der lader dig gemme og hente data i browseren. Du kan gemme og få adgang til data uden udløb; dataene vil være tilgængelige, selv efter at en besøgende lukker dit websted.

Du får normalt adgang til localStorage ved hjælp af JavaScript. Med en lille mængde kode kan du bygge et eksempelprojekt, som en scoretæller. Dette vil vise, hvordan du kan gemme og få adgang til vedvarende data ved kun at bruge kode på klientsiden.

Hvad er localStorage i JavaScript?

LocalStorage-objektet er en del af weblagrings-API'en, som de fleste webbrowsere understøtter. Du kan gemme data som nøgleværdi-par ved hjælp af localStorage. De unikke nøgler og værdier skal være i UTF-16 DOM String-formatet.

Hvis du vil gemme objekter eller arrays, skal du konvertere dem til strenge ved hjælp af JSON.stringify() metode. Du kan gemme op til 5 MB data i localStorage. Alle vinduer med samme oprindelse kan også dele det pågældende websteds localStorage-data.

En browser sletter ikke disse data, selv når en bruger lukker dem. Det vil være tilgængeligt for webstedet, der oprettede det, under enhver fremtidig session. Du bør dog ikke bruge localStorage til følsomme data, da andre scripts, der kører på samme side, kan få adgang til det.

instagram viewer

localStorage vs. sessionStorage

Det localStorage og sessionStorage objekter er en del af Web Storage API, der gemmer nøgleværdi-par lokalt. Alle moderne browsere understøtter dem begge. Med localStorage udløber dataene ikke, selv efter at en bruger lukker deres browser. Dette adskiller sig fra sessionStorage, som rydder data, når sidesessionen slutter. En sidesession slutter, når du lukker en fane eller et vindue.

Koden brugt i dette projekt er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT-licensen. Hvis du vil have et kig på en live-version af scoretællerprojektet, kan du se live demo.

Hvordan virker localStorage?

Du kan få adgang til localStorage-funktionaliteten gennem Window.localStorage ejendom. Denne egenskab giver flere metoder som setItem(), getItem() og removeItem(). Du kan bruge disse til at gemme, læse og slette nøgle/værdi-par.

Sådan gemmer du data i localStorage

Du kan gemme data i localStorage ved hjælp af setItem() metode. Denne metode accepterer to argumenter, nøglen og den tilsvarende værdi.

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

Her, Python er nøglen og Guido van Rossum er værdien. Hvis du vil gemme et array eller et objekt, skal du konvertere det til en streng. Du kan konvertere et array eller et objekt til en streng ved hjælp af JSON.stringify() metode.

vindue.localStorage.setItem('Python', 'Guido van Rossum');
konst elev = {
 navn: "Yuvraj",
 mærker: 85,
 emne: "Machine Learning"
}
konst score = [76, 77, 34, 67, 88];
vindue.localStorage.setItem('result', JSON.stringify (elev));
vindue.localStorage.setItem('marks', JSON.stringify (score));

Sådan læser du data fra localStorage

Du kan læse data fra localStorage ved hjælp af getItem() metode. Denne metode accepterer nøglen som en parameter og returnerer værdien som en streng.

lade data1 = vindue.localStorage.getItem('Python');
lade data2 = vindue.localStorage.getItem('result');
konsol.log (data1);
konsol.log (data2);

Dette giver følgende output:

Guido van Rossum
{"navn":"Yuvraj","mærker":85,"emne":"Maskinelæring"}

Hvis du vil konvertere resultatet fra en streng til et objekt, skal du bruge JSON.parse() metode.

lade data2 = JSON.parse(vindue.localStorage.getItem('resultat'));
konsol.log (data2);

Sådan sletter du lokale lagringssessioner

Du kan slette localStorage-sessioner ved hjælp af removeItem() metode. Du skal videregive nøglen som en parameter til denne metode for at slette nøgleværdi-parret. Hvis nøglen findes, vil metoden slette nøgleværdi-parret, og hvis nøglen ikke findes, vil metoden ikke gøre noget.

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

Sådan rydder du alle elementer i localStorage

Du kan rydde alle elementer i lokalt lager ved hjælp af klar() metode. Du behøver ikke at overføre nogen parameter til denne metode.

vindue.localStorage.klar();

Sådan finder du længden af ​​localStorage

Du kan finde længden af ​​localStorage ved hjælp af localStorage.length ejendom.

lade len = localStorage.length;
konsol.log (len);

Sådan får du nøglen i en given position

Du kan få nøglen på en given position ved hjælp af nøgle() metode. Denne metode accepterer indekset som en parameter.

lade d = localStorage.key(1);
konsol.log (d);

Key()-metoden bruges primært til at gå gennem alle elementerne i localStorage.

Sådan går du gennem alle elementerne i localStorage

Du kan iterere over alle elementerne i localStorage ved hjælp af en for-løkke.

til (lade i = 0; i < localStorage.length; i++){
lade key = localStorage.key (i);
lade værdi = localStorage.getItem (nøgle);
konsol.log (nøgle, værdi);
}

Key()-metoden accepterer indekset som et argument og returnerer den tilsvarende nøgle. GetItem()-metoden accepterer nøglen som et argument og returnerer den tilsvarende værdi. Til sidst console.log() metoden udskriver nøgleværdi-parret.

Simpelt JavaScript-projekt baseret på localStorage

Med en forståelse af dens grundlæggende metoder kan du udvikle dig et simpelt JavaScript-projekt baseret på localStorage. I dette projekt vil du oprette en scoretæller-app, der vil øge og mindske antallet af point i henhold til et klik på en knap. Du vil også implementere funktionalitet til at rydde alle elementer i localStorage.

Opret en index.html og script.js fil i en ny mappe, og åbn filerne i din foretrukne kodeeditor. Brug følgende HTML-kode til at oprette en grænseflade til scoretæller-appen:

<!DOCTYPE html>
<html>
<legeme>
<h1>localStorage i JavaScript</h1>
<knap onclick="øgetæller()" type="knap">Forøg score</button>
<knap onclick="formindsk Tæller()" type="knap">Reducer score</button>
<knap onclick="clearCounter()" type="knap">Ryd localStorage</button>
<s>Score:</s>
<p id="score"></s>
<s>Klik på "Forøg score" knappen for at øge antallet af point</s>
<s>Klik på "Reducer score" knappen for at mindske antallet af point</s>
<s>Klik på "Ryd localStorage" knappen for at rydde lokallageret</s>
<s>
 Du kan lukke browserfanen (eller vindue), og prøve igen.
 Du vil se, at dataene stadig eksisterer ogerikke tabt selv efter lukning
 browseren.
</s>
<script src="script.js"></script>
</body>
</html>

Denne side indeholder tre knapper: Forøg score, Reducer score, og Ryd localStorage. Disse knapper kalder øgetæller(), formindsk Tæller(), og clearCounter() funktioner hhv. Brug følgende kode til at tilføje funktionalitet til scoretæller-appen ved hjælp af JavaScript.

fungerestigningTæller() {
var tælle = Nummer(vindue.localStorage.getItem("count"));
 tælle += 1;
 window.localStorage.setItem("tælle", tælle);
 document.getElementById("score").innerHTML = tælle;
}

Det øgetæller() funktion henter optællingen ved hjælp af getItem() metoden. Det konverterer resultatet til et tal, da getItem() returnerer en streng og gemmer den i tællevariablen.

Første gang du klikker på Forøg score knappen vil være før ethvert kald til setItem(). Din browser vil ikke finde tælle nøgle i localStorage, så det returnerer en null-værdi. Eftersom Number()-funktionen returnerer 0 for en nul-input, behøver den ikke nogen speciel sagsbehandling. Koden kan sikkert øge tælleværdien, før den gemmer den og opdaterer dokumentet for at vise den nye værdi.

fungerefaldTæller() {
var tælle = Nummer(vindue.localStorage.getItem("count"));
 tælle -= 1;
 window.localStorage.setItem("tælle", tælle);
 document.getElementById("score").innerHTML = tælle;
}

Det formindsk Tæller() funktion henter og kontrollerer dataene ligesom øgetæller() gør. Det nedsætter tælle variabel med 1, som som standard er 0.

fungereclearCounter() {
vindue.localStorage.klar();
 document.getElementById("score").innerHTML = "";
}

Sidst, den clearCounter() funktionen sletter alle data fra localStorage ved hjælp af klar() metode.

Gør mere med localStorage

LocalStorage-objektet har flere metoder, herunder setItem(), getItem(), removeItem() og clear(). Selvom localStorage er let at bruge, er det ikke sikkert at gemme følsomme oplysninger. Men det er et godt valg at udvikle projekter, der ikke kræver meget opbevaring og ikke involverer nogen følsomme oplysninger.

Vil du bygge endnu et localStorage-baseret JavaScript-projekt? Her er en grundlæggende to-do liste-app, som du kan udvikle ved hjælp af HTML, CSS og JavaScript.