JavaScript-cookies


Innehållsförteckning

    Visa innehållsförteckning


Cookies låter dig lagra användarinformation på webbsidor.


Vad är cookies?

Cookies är data som lagras i små textfiler på din dator.

När en webbserver har skickat en webbsida till en webbläsare är anslutningen stängs av och servern glömmer allt om användaren.

Cookies uppfanns för att lösa problemet "hur man kommer ihåg information om användaren":

  • När en användare besöker en webbsida kan hans/hennes namn lagras i en cookie.

  • Nästa gång användaren besöker sidan kommer kakan att "komma ihåg" hans/hennes namn.

Cookies sparas i namn-värdepar som:

username = John Doe

När en webbläsare begär en webbsida från en server läggs cookies som hör till sidan till förfrågan. På detta sätt servern får nödvändig data för att "komma ihåg" information om användare.

Inget av exemplen nedan kommer att fungera om din webbläsare har stöd för lokala cookies avstängt.


Skapa en cookie med JavaScript

JavaScript kan skapa, läsa och ta bort cookies med document.cookien fast egendom.

Med JavaScript kan en cookie skapas så här:

document.cookie = "username=John Doe";

Du kan också lägga till ett utgångsdatum (i UTC-tid). Som standard raderas cookien när webbläsaren stängs:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Med en sökvägsparameter kan du tala om för webbläsaren vilken sökväg cookien tillhör. Som standard tillhör kakan den aktuella sidan.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";


Läs en cookie med JavaScript

Med JavaScript kan cookies läsas så här:

let x = document.cookie;

document.cookie returnerar alla cookies i en sträng ungefär som: cookie1=värde; cookie2=värde; cookie3=värde;


Ändra en cookie med JavaScript

Med JavaScript kan du ändra en cookie på samma sätt som du skapar den:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Den gamla kakan skrivs över.


Ta bort en cookie med JavaScript

Att ta bort en cookie är väldigt enkelt.

Du behöver inte ange ett cookievärde när du raderar en cookie.

Ställ bara in expires-parametern till ett tidigare datum:

document.cookie = "username=; expires=Thu, 01 
Jan 1970 00:00:00 UTC; path=/;";

Du bör definiera cookie-sökvägen för att säkerställa att du raderar rätt cookie.

Vissa webbläsare låter dig inte ta bort en cookie om du inte anger sökvägen.


Kaksträngen

Egenskapen document.cookie ser ut som en vanlig textsträng. Men det är det inte.

Även om du skriver en hel cookiesträng till document.cookie, när du läser upp den igen, kan du bara se namn-värde par av det.

Om du ställer in en ny cookie skrivs inte äldre cookies över. Den nya kakan läggs till document.cookie, så om du läser document.cookie igen får du något som:

cookie1=värde; cookie2=värde;

Om du vill hitta värdet på en angiven cookie måste du skriva ett JavaScript funktion som söker efter cookievärdet i cookiesträngen.


Exempel på JavaScript-kaka

I exemplet som följer kommer vi att skapa en cookie som lagrar namnet på en besökare.

Första gången en besökare kommer till webbsidan kommer han/hon att bli ombedd att fylla i sitt namn. Namnet lagras sedan i en cookie.

Nästa gång besökaren kommer till samma sida får han/hon ett välkomstmeddelande.

För exemplet kommer vi att skapa 3 JavaScript-funktioner:

  1. En funktion för att ställa in ett cookievärde

  2. En funktion för att få ett cookievärde

  3. En funktion för att kontrollera ett cookievärde


En funktion för att ställa in en kaka

Först skapar vi en funktion som lagrar namnet på besökaren i en cookievariabel:

Exempel

function setCookie(cname, cvalue, exdays) {
   const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Exempel förklarat:

Parametrarna för funktionen ovan är namnet på kakan (cname), värdet på kakan (cvalue) och antalet dagar tills cookien ska löpa ut (exdays).

Funktionen sätter en cookie genom att lägga ihop cookienamnet, cookien värde och strängen löper ut.


En funktion för att få en kaka

Sedan skapar vi en funktion som returnerar värdet av en angiven cookie:

Exempel

function getCookie(cname) {
   
let name = cname + "=";
   
let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
      let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
      
 }
      if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
      }
    }
    return "";
}

Funktion förklarad:

Ta cookiename som parameter (cname).

Skapa en variabel (namn) med texten att söka efter (cname + "=").

Avkoda cookie-strängen, för att hantera cookies med specialtecken, t.ex. '$'

Dela document.cookie på semikolon i en array som heter ca (ca = decodedCookie.split(';')).

Slinga genom ca-matrisen (i=0; i < ca.length; i++) och läs ut varje värde c=ca[i]).

Om cookien hittas (c.indexOf(name) == 0), returnera värdet på cookien (c.substring(name.length, c.length).

Om kakan inte hittas, returnera "".


En funktion för att kontrollera en kaka

Till sist skapar vi funktionen som kontrollerar om en cookie är inställd.

Om cookien är inställd kommer den att visa en hälsning.

Om cookien inte är inställd kommer den att visa en uppmaningsruta som frågar efter användarens namn, och lagrar användarnamnskakan i 365 dagar genom att anropa funktionen setCookie:

Exempel

function checkCookie() {
  let 
username = getCookie("username");
  if (username != "") {
     alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
      if (username != "" 
&& username != null) {
        setCookie("username", username, 365);
      }
  }
}

Alla tillsammans nu

Exempel

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
   
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + 
";" + expires + ";path=/";
}
function getCookie(cname) {
  let name = cname + "=";
    let ca 
= document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) 
{
    
let c = ca[i];
    while (c.charAt(0) == ' 
') {
      c = c.substring(1);
    }
    if (c.indexOf(name) 
 == 0) {
      return c.substring(name.length, c.length);
      }
  }
    return "";
}
function 
checkCookie() {
  let user = getCookie("username");
  if (user != "") 
{
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
      if (user != "" && 
user != null) {
      setCookie("username", user, 365);
      }
  }
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

Exemplet ovan kör funktionen checkCookie() när sidan läses in.