Cookies i JavaScript: Indstil, hent og slet eksempel

Hvad er cookies?

En cookie er et stykke data, der gemmes på din computer, så din browser kan tilgå dem. Du har måske også bevidst eller ubevidst benyttet dig af cookies. Har du nogensinde været logget ind på et websted som Facebook, så du ikke behøver at indtaste dine oplysninger hver gang, du prøver at logge ind? Hvis ja, bruger du cookies. Cookies gemmes som nøgle/værdi-par.

En vigtig præcisering: En cookie gemmer ikke din adgangskode. Den indeholder et sessionsidentifikator, som er et tilfældigt token, som serveren udsteder efter et vellykket login. Serveren matcher dette token med din konto, så selve adgangskoden aldrig forlader serveren.

Hvorfor har du brug for en cookie?

Kommunikationen mellem en webbrowser og serveren sker ved hjælp af en statsløs protokol kaldet HTTP. En statsløs protokol behandler hver anmodning uafhængigt. Så serveren gemmer ikke dataene efter at have sendt dem til browseren. Men i mange situationer vil dataene være nødvendige igen. Her kommer cookies ind i billedet. Med cookies behøver webbrowseren ikke at kommunikere med serveren hver gang dataene er nødvendige. I stedet kan de hentes direkte fra computeren.

Typiske anvendelser inkluderer at huske en logget ind-session, gemme en sprog- eller temapræference, keepping varer i en butikping kurv mellem sider og tælling af førstegangsbesøgende versus tilbagevendende besøgende.

Javascript Indstil Cookie

Du kan oprette cookies ved hjælp af document.cookie-egenskaben på denne måde.

document.cookie = "cookiename=cookievalue"

Du kan endda tilføje en udløbsdato til din cookie, så den specifikke cookie fjernes fra computeren på den angivne dato. Udløbsdatoen skal angives i UTC/GMT-format. Hvis du ikke angiver udløbsdatoen, fjernes cookien, når brugeren lukker browseren.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Du kan også indstille domænet og stien for at angive, hvilket domæne og hvilke mapper i det specifikke domæne cookien tilhører. Som standard tilhører en cookie den side, der sætter cookien.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//opret en cookie med et domæne for den aktuelle side og en sti, der dækker hele domænet.

JavaHent cookie i scriptet

Du kan tilgå cookien på denne måde, som vil returnere alle cookies, der er gemt for det aktuelle domæne.

var x =  document.cookie

Den returnerede værdi er en enkelt streng i formen name1=value1; name2=value2Der er ingen indbygget metode til at læse en cookie efter navn, så strengen skal opdeles. Hjælperen nedenfor returnerer en enkelt værdi og en tom streng, når navnet mangler.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Output:

Ann Smith
true

JavaScript Slet cookie

For at slette en cookie skal du blot indstille værdien for cookien til tom og indstille værdien for expires til en dato, der allerede er overskredet.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Én detalje forårsager de fleste mislykkede sletninger. Browseren identificerer en cookie ved dens navn sammen med dens sti og domæne, så sletningssætningen skal gentage den samme sti og domæne, der blev brugt, da cookien blev oprettet.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Cookie-attributter forklaret

Hver attribut efter det første semikolon ændrer, hvor længe cookien lever, hvilke anmodninger der bærer den, og hvilken kode der må læse den. Referencen nedenfor dækker dem alle.

SameSite fortjener særlig opmærksomhed, fordi browsere nu anvender en standardværdi. De tre accepterede værdier opfører sig som følger.

• Streng: Cookien sendes aldrig, når anmodningen stammer fra et andet websted, hvilket er den sikreste indstilling for banksessioner.
• Slap: Cookien følger med navigation på topniveau, f.eks. ved at klikke på et link, men ikke med billeder eller rammer på tværs af websteder. Dette er standardindstillingerne for moderne browsere.
• Ingen: Cookien sendes ved hver anmodning på tværs af websteder og skal parres med attributten Secure, ellers afviser browseren den.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Prøv selv dette eksempel

Scriptet nedenfor kombinerer alle tre operationer. Det opretter en cookie med et udløb målt i dage, læser den op ved navn og hilser en tilbagevendende besøgende velkommen. Særlige instruktioner til at få koden til at virke … Tryk to gange på kør-knappen.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Forventet adfærd:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code forklaring: Funktionen createCookie konverterer et antal dage til millisekunder og lægger dem til det aktuelle klokkeslæt, hvilket giver udløbsdatoen. Funktionen accessCookie opdeler cookiestrengen med semikolon, trimmer hvert fragment og sammenligner starten af ​​fragmentet med det ønskede navn. Funktionen checkCookie binder de to sammen ved sideindlæsning.

Cookies vs. lokallagring vs. sessionslagring

Cookies er ikke det eneste sted, en browser kan gemme data. Der findes to weblagringsmuligheder, og hvis du vælger dem korrekt, undgår du at sende unødvendige bytes ved hver anmodning.

Den praktiske regel er enkel. Hvis serveren har brug for værdien, skal du bruge en cookie. Hvis det kun er siden, der har brug for den, skal du bruge localStorage eller sessionStorage, fordi disse værdier aldrig tilføjer vægt til en netværksanmodning.

Kode til håndtering af cookies deles normalt på tværs af mange sider, så gennemgå interne og eksterne JavaScript før man beslutter, hvor den skal placeres. Den her anvendte strengopdeling bygger på JavaScriptstrenge og JavaScript array-metoder, og yderligere arbejdsmanuskripter vises i praktisk JavaEksempler på scriptkode.

Ofte Stillede Spørgsmål