LocalStorage and SessionStorage | Forklart

Web API og Web Storage API er to av de mest nyttige API -ene som støttes av de fleste nettlesere, Web Storage API beviser to objekter lokal lagring lagring og SessionStorage som hjelper oss med å lagre dataene våre i nettleserens minne. Begge disse objektene lar oss lagre data lokalt, og den eneste forskjellen er at med SessionStorage -objektet blir dataene automatisk slettet når sesjonen går ut, mens dataene med LocalStorage -objektet blir lagret permanent.

Disse objektene kan betraktes som alternativer for informasjonskapsler og ha fordelene fremfor informasjonskapsler også, og sier at disse objektene kan overhale informasjonskapsler helt er ikke sant. Informasjonskapsler kan leses av servere og andre webapplikasjoner, mens dataene som er lagret lokalt i nettleseren din ikke kan leses av noen server. Dette gir sikkerhetsfordeler.

LocalStorage and SessionStorage | Syntaks

Begge disse objektene har identiske funksjoner med identiske syntaks. Syntaksen for LocalStorage -objektet er definert som

lokal lagring.funksjon (nøkkel, verdi);

Tilsvarende for SessionStorage -objekt er syntaksen definert som

SessionStorage.funksjon (nøkkel, verdi);

Funksjoner levert av LocalStorage & SessionStorage

Begge disse objektene fra Web Storage API gir 5 funksjoner og en Const -variabel som:

• setItem (): Å lagre en ny oppføring i den lokale lagringen i form av nøkkelverdipar
• getItem (): å hente en oppføring fra den lokale lagringen ved å bruke nøkkelen
• Clear (): For å tømme den lokale lagringen av nettleseren
• Fjern (): For å fjerne en verdi fra den lokale lagringen ved hjelp av en nøkkel
• Key (): For å returnere navnet på nøkkelen ved å bruke indeksverdien
• Lengde (): En variabel som lagrer antall oppføringer i lokal lagring

LocalStorage and SessionStorage | Bruk

For å demonstrere bruken av nettlagrings -API, åpner du nettleseren du ønsker (Chrome i vårt tilfelle) og besøk et nettsted som www.Google.com.

Hvordan lage/legge til data i localStorage ved hjelp av setItem () -metoden

Opprett en ny dataregistrering i den lokale lagringen ved å skrive inn følgende kodelinje i konsollen til nettleseren:

lokal lagring.setItem ("navn", "John Doe");

Hvis kommandoen kjøres uten feil, betyr dette at en ny oppføring ble gjort i nettleserens lagring.

For å bekrefte dette, gå til "applikasjoner" -fanen i utviklerens verktøy og utvide lokal lagring. Du skal kunne se verdien i Explorer:

Hvordan få tilgang til/få data fra LocalStorage ved hjelp av GetItem () -metoden

For å få tilgang til enhver oppføring fra lokal lagring, kan du enten bruke en dot-operatør med LocalStorage-objektet og deretter angi tasten eller bruke GetItem () -funksjonen. For å få tilgang til "navnet" vi nettopp lagret, kan vi enten bruke:

var navn = localStorage.Navn;
konsoll.Logg (navn)

Utgangen er som:

Eller vi kan bruke kommandoen som vist:

konsoll.Logg (LocalStorage.getItem ("navn"));

Utgangen er som

Permanent lagring av LocalStorage -objektet | Bekreftelse

For å bekrefte at LocalStorage -objektet lagrer data permanent (inntil de er fjernet manuelt), lukker du nettleserne som tidligere hadde åpnet lenken der du lagret noen data (i vårt tilfelle var det Google.com)

Du har avsluttet det gyldne håndtrykk og avsluttet gjeldende økter med nettstedet ved å lukke nettleserne, åpne nettleseren på nytt og gå over til samme nettsted og deretter gå inn i utviklerverktøy> applikasjoner> Lokal lagring for å bekrefte om dataene fremdeles er der eller ikke :

Alle de ovennevnte trinnene kan gjøres med SessionStorage -objektet, men husk at det vil slette alle dataene når økten utløper. La oss se demonstrasjonen.

Hvordan lage/legge til data i SessionStorage ved hjelp av SetItem () -metoden

Vi kommer til å først opprette en ny oppføring i SessionStorage med følgende kodelinje:

SessionStorage.setItem ("jobb", "revisor");

Konsollen viser "udefinert", noe som betyr at kommandoen ble utført med suksess uten feil:

Vi kan bekrefte lagringen under kategorien Session Storage:

Lukk nettleserne, og åpne den samme lenken på nytt og gå til utviklerens verktøy> Applikasjoner> Sessions Storage, du vil se følgende resultater:

Du kan se at oppføringen ble slettet, dette beviser at SessionStorage -objektet bare lagrer data for i lokal lagring av nettleseren for bare en økt.

Konklusjon

LocalStorage og SessionStorage -objekter brukes til å lagre data i nettleserens lokale lagring, og de er en del av Web Storage API; Begge disse objektene gir 5 funksjoner til brukeren som lar brukerne opprette, oppdatere, få og slette en oppføring fra den lokale lagringen. Forskjellen mellom LocalStorage og SessionStorage -objektet er at LocalStorage -objektet permanent lagrer dataene mot et nettsted mens SessionStroage -objektet bare lagrer dataene for en økt.