Kakor i JavaSkript: Set, Get & Delete Exempel

Vad är cookies?

En cookie är en datafil som lagras på din dator för att din webbläsare ska kunna komma åt den. Du kanske också har utnyttjat fördelarna med cookies, medvetet eller omedvetet. Har du någonsin varit inloggad på en webbplats som Facebook så att du inte behöver skriva in dina uppgifter varje gång du försöker logga in? Om ja, då använder du cookies. Cookies sparas som nyckel/värde-par.

Ett viktigt förtydligande: en cookie lagrar inte ditt lösenord. Den innehåller en sessionsidentifierare, vilket är en slumpmässig token som servern utfärdar efter en lyckad inloggning. Servern matchar den token med ditt konto, så lösenordet lämnar aldrig servern.

Varför behöver du en kaka?

Kommunikationen mellan en webbläsare och servern sker med hjälp av ett tillståndslöst protokoll som heter HTTP. Ett tillståndslöst protokoll behandlar varje begäran oberoende. Så servern lagrar inte data efter att ha skickat den till webbläsaren. Men i många situationer kommer data att behövas igen. Här kommer cookies in i bilden. Med cookies behöver webbläsaren inte kommunicera med servern varje gång data behövs. Istället kan de hämtas direkt från datorn.

Typiska användningsområden inkluderar att komma ihåg en inloggad session, lagra språk- eller temainställningar,ping varor i en butikping varukorg mellan sidor och räkna förstagångsbesökare kontra återkommande besökare.

Javascript Ställ in Cookie

Du kan skapa cookies med hjälp av egenskapen document.cookie så här.

document.cookie = "cookiename=cookievalue"

Du kan till och med lägga till ett utgångsdatum till din cookie så att den specifika cookien tas bort från datorn på det angivna datumet. Utgångsdatumet bör anges i UTC/GMT-format. Om du inte anger något utgångsdatum kommer cookien att tas bort när användaren stänger webbläsaren.

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

Du kan också ange domän och sökväg för att ange vilken domän och vilka kataloger i den specifika domänen cookien tillhör. Som standard tillhör en cookie den sida som placerar cookien.

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

//skapa en cookie med en domän för den aktuella sidan och en sökväg som täcker hela domänen.

JavaSkript Hämta cookie

Du kan komma åt cookien så här, vilken returnerar alla cookies som sparats för den aktuella domänen.

var x =  document.cookie

Det returnerade värdet är en enda sträng i formen name1=value1; name2=value2Det finns ingen inbyggd metod för att läsa en cookie efter namn, så strängen måste delas. Hjälparen nedan returnerar ett enda värde och en tom sträng när namnet saknas.

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") === "");

Produktion:

Ann Smith
true

JavaSkript Ta bort Cookie

För att radera en cookie behöver du bara ställa in cookiens värde till tomt och värdet för expires till ett datum som redan har passerat.

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

En detalj orsakar de flesta misslyckade borttagningar. Webbläsaren identifierar en cookie med dess namn tillsammans med dess sökväg och domän, så borttagningskommandot måste upprepa samma sökväg och domän som användes när cookien skapades.

// 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";

Förklaring av cookieattribut

Varje attribut efter det första semikolonet ändrar hur länge cookien lever, vilka förfrågningar som bär den och vilken kod som får läsa den. Referensen nedan täcker alla dessa.

SameSite förtjänar särskild uppmärksamhet eftersom webbläsare nu använder en standardvärde. De tre accepterade värdena beter sig enligt följande.

• Sträng: Cookien skickas aldrig när begäran kommer från en annan webbplats, vilket är den säkraste inställningen för banksessioner.
• Slapp: Cookien följer med navigering på toppnivå, till exempel genom att klicka på en länk, men inte med bilder eller ramar som går över flera webbplatser. Detta är standardinställningen för moderna webbläsare.
• Inga: Cookien skickas vid varje begäran mellan olika webbplatser och måste paras ihop med attributet Secure, annars avvisar webbläsaren den.

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

Prova det här exemplet själv

Skriptet nedan kombinerar alla tre operationerna. Det skapar en cookie med ett utgångsdatum mätt i dagar, läser upp den med namn och hälsar en återkommande besökare välkommen. Särskilda instruktioner för att få koden att fungera … Tryck två gånger på körknappen.

<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>

Förväntat beteende:

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 förklaring: Funktionen createCookie konverterar ett antal dagar till millisekunder och lägger till dem till den aktuella tiden, vilket ger utgångsdatumet. Funktionen accessCookie delar upp cookiesträngen med semikolon, trimmar varje fragment och jämför början av fragmentet med det begärda namnet. Funktionen checkCookie knyter ihop de två vid sidans inläsning.

Cookies kontra lokal lagring kontra sessionslagring

Cookies är inte den enda platsen där en webbläsare kan lagra data. Det finns två alternativ för webblagring, och om du väljer rätt sätt undviker du att skicka onödiga byte vid varje begäran.

Den praktiska regeln är enkel. Om servern behöver värdet, använd en cookie. Om bara sidan behöver det, använd localStorage eller sessionStorage, eftersom dessa värden aldrig lägger till vikt till en nätverksförfrågan.

Kod för hantering av cookies delas vanligtvis över många sidor, så granska internt och externt JavaScript innan man bestämmer var den ska placeras. Strängdelningen som används här bygger på JavaSkriptsträngar och JavaSkriptmatrismetoder, och ytterligare arbetsskript visas i praktisk JavaExempel på skriptkod.

Vanliga frågor