Hvordan sette, sjekke og lese en informasjonskapslerverdi med JavaScript?

Informasjonskapsler er små tekstfiler som holder en liten bit data på brukerens datamaskin (rundt 4kb) og brukes til å lagre informasjon om en bruker, for eksempel en brukers preferanser for et nettsted som nettstedet kan hente for å tilpasse websiden når Brukeren besøker nettstedet igjen. For å si det enkelt, hjelper informasjonskapsler i et mer praktisk og personlig nettstedbesøk for brukerne. En informasjonskapsel sendes til datamaskinen din av et nettsted når du besøker den og lagres i en fil på datamaskinen din som er tilgjengelig gjennom nettleseren din.

Vi vil snakke om hvordan du setter, sjekker og leser en cookie -verdi med JavaScript i denne artikkelen. Før jeg går videre, la meg imidlertid stresse med det punktet at informasjonskapsler ikke skal brukes til å lagre kritisk/sensitiv informasjon som passord eller detaljer om kredittkortet ditt, siden ondsinnede individer kunne få tilgang til dem.

Opprette en informasjonskapsel

De dokument.kjeks Eiendom oppretter, leser og sletter informasjonskapsler, og dette er eiendommen, som representerer alle informasjonskapslene som er koblet til et dokument. For å lage en informasjonskapsel først bør vi vite at informasjonskapsler lagres i par-verdipar for eksempel:

Brukernavn = Obama;

La oss nå lage en informasjonskapsel i JavaScript:

dokument.cookie = "brukernavn = Obama";

En cookies levetid er satt til varigheten av den nåværende nettleserøkten, noe som betyr at den utløper når brukeren lukker nettleseren. For å løse dette problemet bruker vi maks-alder Attributt som sikrer at informasjonskapselen vedvarer utover den nåværende nettleserøkten. I den maksimale attributtet kan vi spesifisere levetiden til en informasjonskapsel i sekunder i-e hvor lenge vil cookien forbli før den blir slettet. Levetiden til informasjonskapselen i koden nedenfor er 30 dager:

dokument.cookie = "brukernavn = Obama; max-age =" + 30*24*60*60;

Vi kan også bruke utløpe Attributt som tar den nøyaktige datoen i stedet for sekunder i GMT/UTC -formatet og på den datoen utløper informasjonskapselen:

dokument.Cookie = "Brukernavn = Obama; utløper = Thu, 26. september 2021 12:00:00 UTC";

En annen attributt vi kan bruke i opprettelsen av informasjonskapsel er sti Attributt som forteller nettleseren hvilken vei kake tilhører snarere enn standardbanen som er den nåværende siden.

dokument.Cookie = "Brukernavn = Obama; utløper = Thu, 26. september 2021 12:00:00 UTC; Path =/";

Vi må bruke JavaScript enkodeuricomponent () ettersom cookie -verdien inneholder komma, semikoloner og mellomrom og encodeuricomponenet () Sikrer at strengen ikke inneholder komma, semikoloner og mellomrom, da disse ikke er tillatt i informasjonskapsler.

dokument.cookie = "username =" + encodeuricomponent ("Obama");

Lesing cookie

Vi kan lese eller få alle informasjonskapsler i et nåværende domene ved å bruke dokument.kjeks:

var x = dokument.kjeks;

Akkurat som i å lage en informasjonskapsel vi brukte enkodeuricomponent () Når vi leser en informasjonskapsel, må vi bruke DecodeuRicOMPonenet ():

dokument.cookie = "username =" + decodeuricomponent ("Obama");

Slette informasjonskapsel

Vi kan også slette en informasjonskapsel og i JavaScript er prosessen veldig enkel, ettersom vi ikke trenger å spesifisere noen informasjonskapslerverdier, snarere kan vi bruke utløpsparameteren og oppdatere den ved å bruke en tidligere dato for eksempel:

dokument.Cookie = "Brukernavn = Obama; utløper = Thu, 20. nov 2018 12:00:00 UTC; Path =/";

Slette informasjonskapsel

Vi kan også slette en informasjonskapsel og i JavaScript er prosessen veldig enkel, ettersom vi ikke trenger å spesifisere noen informasjonskapslerverdier, snarere kan vi bruke utløpsparameteren og oppdatere den ved å bruke en tidligere dato for eksempel:

dokument.Cookie = "Brukernavn = Obama; utløper = Thu, 20. nov 2018 12:00:00 UTC; Path =/";

Cookie -eksempel i JavaScript

Nå som vi vet hva en informasjonskapsel er, hvordan du lager eller leser en informasjonskapsel, la oss kombinere alt vi har lært og lage en informasjonskapsel som lagrer et navn når en bruker besøker nettstedet vårt. Vi tar et inngangsnavn fra brukeren når brukeren kommer inn på nettstedet vårt for første gang og vil lagre det i en informasjonskapsel. Når brukeren kommer inn på nettstedet igjen, vil han/hun få en velkomstmelding på nettstedet.

For å implementere eksemplet ovenfor, trenger vi 3 funksjoner der en av funksjonene vil angi en informasjonskapsel, en vil lese/få en informasjonskapslerverdi og den siste funksjonen vil sjekke cookie -verdien.

Sett kakefunksjon

funksjon setcookie (brukernavn, verdi, utløp)
const dato = ny dato ();
Dato.Settime (dato.getTime () + (utløp * 24 * 60 * 60 * 1000));
var utløper = "utløper ="+dato.ToutCstring ();
dokument.cookie = brukernavn + "=" + verdi + ";" + utløper + "; bane =/";

Få kakefunksjon

funksjon getcookie (brukernavn)
la navn = brukernavn + "=";
La SPLI = dokument.kjeks.dele(';');
for (var j = 0; j < spli.length; j++)
La char = spli [j];
mens (røye.charat (0) == ")
røye = røye.substring (1);

hvis (røye.indeks av (navn) == 0)
Returner char.Substring (navn.Lengde, røye.lengde);


komme tilbake "";

For å skaffe en enkelt informasjonskapsel brukte vi den delte metoden som vil bryte ned navnet = verdipar og deretter søke etter navnet vi ønsker.

Sjekk kakefunksjonen

funksjon checkcookie ()
var bruker = getcookie ("brukernavn");
// sjekke om brukeren er null eller ikke
hvis (bruker != "")
// Hvis brukeren ikke er null, så våken
Varsel ("Velkommen igjen" + bruker);

// Hvis brukeren er null
annet
// ta innspill fra brukeren
bruker = spør ("Vennligst skriv inn navnet ditt:", "");
// Sett informasjonskapsel
hvis (bruker != "" && bruker != null)
setcookie ("brukernavn", bruker, 365);



sjekkcookie ();

Sjekkekaken sjekker ganske enkelt om navnet eksisterer eller ikke I-E om brukeren først har besøkt nettstedet vårt eller ikke. Den sjekker ved først å ringe getcookie () -metoden som sjekker om brukernavnet eksisterer eller ikke, og hvis den eksisterer viser velkomstmelding med navnet på brukeren. Hvis brukernavnet ikke eksisterer, kaller det SetCookie () -metoden, og brukeren skriver inn navnet og informasjonskapselen er satt.

Nedenfor er skjermbildene til da jeg besøkte nettstedet først:

Nedenfor er skjermbildet som viser navnet jeg angir etter å ha forfrisket til siden:

Konklusjon

En informasjonskapsel er en liten tekstfil som består av litt informasjon om en bruker og er en datapakke som en datamaskin mottar og deretter sender tilbake uten å endre eller endre den. Nettleserkakene hjelper til med å holde oversikt over brukerbesøk og brukeraktiviteter. For eksempel har du lagt til noen elementer i handlekurven din, og du utforsker nettstedet og gått til en annen side, eller du ved et uhell oppdaterer det, uten informasjonskapsler ville handlekurven din bli tom. Vi så på hvordan vi skulle sette, sjekke og lese informasjonskapsler i JavaScript med eksempler i dette innlegget.