Hvordan lagre og hente data i nettleseren

Nettlesere kan bruke nettlagring for å lagre og hente data lokalt. Å lagre data i nettleseren er sikrere, og det forbedrer også ytelsen til nettstedet. I motsetning til informasjonskapsler, er nettlagringen mye høyere, og data overføres ikke til serveren. Nettlagring er basert på protokollen og domenet, og alle sider fra en enkelt kilde kan lagre og hente den samme informasjonen.

Denne oppskrivningen vil diskutere prosedyren for lagring og hente data i nettleseren. Videre vil eksempler relatert til bruk av LocalStorage og SessionStorage HTML Web Objects bli gitt. Så la oss starte!

Nettlagringsobjekter i nettleseren

To nettlagringsobjekter er gitt av HTML, som du kan bruke til lagring og hente dataene. “lokal lagring”Er en type HTML -lagring som ikke har en utløpsdato, mens“SessionStorage”Objekt lagrer bare informasjonen relatert til en enkelt økt, som betyr å lukke den gjeldende nettleserfanen vil fjerne alle lagrede data.

Før du bruker LocalStorage og SessionStorage, må du sørge for at HTML -nettlagring støttes av nettleseren din:

if (typeof (lagring) !== "udefinert")
// Skriv ut kode for HTML -lagringsobjekter
annet
// Nettleseren din støttes ikke

LocalStorage HTML Web Storage Object i nettleseren

Som nevnt tidligere har dataene som er lagret i LocalStorage -objektet ingen utløpsdato, og de blir ikke slettet selv om nettleseren din er lukket. De lagrede dataene kan hentes dagen, uken eller året.

Eksempel 1: Bruke LocalStorage HTML Web Storage Object i nettleseren

I det undergitte eksemplet vil vi lage en “lokal lagring”Webobjekt som har et“Navn: Verdi" par:

Utfør ovennevnte program i din favorittkodeditor eller en hvilken som helst online kodende sandkasse; Imidlertid vil vi bruke JSBIN til dette formålet:

Som du ser fra utdataene, har vi lagret og hentet data ved hjelp av "lokal lagring”HTML Web Object:

Du kan også utføre følgende kode for samme formål:

Det oppgitte eksemplet vil også vise deg den samme utgangen:

Hvis du vil fjerne et element eller en oppføring fra ditt lokale opptakelsesobjekt, må du ringe "fjerne gjenstand()”Metode og passere“Navn”Element som et argument:

lokal lagring.removeItem ("navn");

Eksempel 2: Bruke LocalStorage HTML Web Storage Object i nettleseren

La oss sjekke ut andre eksempel. I det undergitte JavaScript-programmet "lokal lagring”Objekt vil telle og lagre antall ganger en bruker klikket på“Klikk”Knapp:

Klikk

Klikk på knappen for å sjekke tellerverdien.

Her viser utgangen en “Klikk”-Knappen; Klikk på den for å sjekke ButtonClickCounter -verdien:

Opprinnelig ble verdien av ButtonClickCounter satt til “0,”Og det vil bli økt når vi klikker på knappen:

SessionStorage HTML Web Storage Object i nettleseren

HTML “SessionStorage”Objekt fungerer det samme som“lokal lagring“; Du kan imidlertid bare bruke den til lagring og hente data for den aktuelle økten. Så snart den åpne nettleserfanen er lukket, blir alle lagrede data bli slettet.

Eksempel 2: Bruke SessionStorage HTML Web Storage Object i nettleseren

Følgende JavaScript -program vil lagre og hente "ButtonClickCount”For den aktuelle økten. ButtonClickCount legges til for å telle antall ganger en bruker klikket på den medfølgende knappen:

Klikk

Klikk på knappen for å sjekke tellerverdien.

Å trykke på den uthevede knappen er å hente dataene som er lagret i "SessionStorage”Knapp:

Konklusjon

Utviklere kan bruke lokal lagring og SessionStorage HTML webobjekter for å lagre og hente data i nettleseren. LocalStorage -objektet har ikke en utløpsdato, mens SessionStorage bare lagrer informasjonen relatert til en enkelt økt, som betyr å lukke den gjeldende nettleserfanen vil fjerne alle lagrede data. Denne oppskrivningen diskuterte prosedyren for lagring og henting av data i nettleseren. Dessuten er det også gitt eksempler relatert til LocalStorage og SessionStorage HTML Web Objects bruk.