JavaScript-cookies

Indholdsfortegnelse

Vis indholdsfortegnelse

Cookies lader dig gemme brugeroplysninger på websider.

Hvad er cookies?

Cookies er data, gemt i små tekstfiler, på din computer.

Når en webserver har sendt en webside til en browser, er forbindelsen lukkes ned, og serveren glemmer alt om brugeren.

Cookies blev opfundet for at løse problemet "hvordan man husker information om brugeren":

Når en bruger besøger en webside, kan hans/hendes navn gemmes i en cookie.
Næste gang brugeren besøger siden, "husker" cookien hans/hendes navn.

Cookies gemmes i navne-værdi-par som:

username = John Doe

Når en browser anmoder om en webside fra en server, tilføjes cookies tilhørende siden til anmodningen. På denne måde serveren får de nødvendige data til at "huske" oplysninger om brugere.

Ingen af eksemplerne nedenfor vil virke, hvis din browser har deaktiveret understøttelse af lokale cookies.

Opret en cookie med JavaScript

JavaScript kan oprette, læse og slette cookies med document.cookien ejendom.

Med JavaScript kan en cookie oprettes på denne måde:

document.cookie = "username=John Doe";

Du kan også tilføje en udløbsdato (i UTC-tid). Som standard slettes cookien, når browseren lukkes:

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

Med en stiparameter kan du fortælle browseren, hvilken sti cookien tilhører. Som standard hører cookien til den aktuelle side.

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æses sådan:

let x = document.cookie;

document.cookie returnerer alle cookies i én streng ligesom: cookie1=værdi; cookie2=værdi; cookie3=værdi;

Skift en cookie med JavaScript

Med JavaScript kan du ændre en cookie på samme måde, som du opretter den:

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

Den gamle cookie er overskrevet.

Slet en cookie med JavaScript

Det er meget enkelt at slette en cookie.

Du behøver ikke at angive en cookieværdi, når du sletter en cookie.

Indstil blot udløbsparameteren til en tidligere dato:

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

Du bør definere cookie-stien for at sikre, at du sletter den rigtige cookie.

Nogle browsere vil ikke lade dig slette en cookie, hvis du ikke angiver stien.

Cookie-strengen

Egenskaben document.cookie ligner en normal tekststreng. Men det er det ikke.

Selvom du skriver en hel cookiestreng til document.cookie, kan du, når du læser den op igen, kun se navn-værdi par af det.

Hvis du indstiller en ny cookie, overskrives ældre cookies ikke. Den nye cookie føjes til document.cookie, så hvis du læser document.cookie igen får du noget som:

cookie1=værdi; cookie2=værdi;

Hvis du vil finde værdien af en specificeret cookie, skal du skrive et JavaScript funktion, der søger efter cookieværdien i cookiestrengen.

Eksempel på JavaScript-cookie

I det følgende eksempel vil vi oprette en cookie, der gemmer navnet på en besøgende.

Første gang en besøgende ankommer til websiden, bliver han/hun bedt om at udfylde sit navn. Navnet gemmes derefter i en cookie.

Næste gang den besøgende ankommer til samme side, får han/hun en velkomstbesked.

Til eksemplet vil vi oprette 3 JavaScript-funktioner:

En funktion til at indstille en cookieværdi
En funktion til at få en cookieværdi
En funktion til at kontrollere en cookieværdi

En funktion til at indstille en cookie

Først opretter vi en funktion, der gemmer navnet på den besøgende i en cookievariabel:

Eksempel

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

Forklaret eksempel:

Parametrene for funktionen ovenfor er navnet på cookien (cname), værdien af cookien (cvalue), og antallet af dage, indtil cookien skal udløbe (exdays).

Funktionen sætter en cookie ved at tilføje cookienavnet, cookien værdi, og udløber strengen.

En funktion til at få en cookie

Derefter opretter vi en funktion, der returnerer værdien af en specificeret cookie:

Eksempel

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

Tag cookiename som parameter (cname).

Opret en variabel (navn) med teksten, der skal søges efter (cname + "=").

Afkode cookie-strengen, for at håndtere cookies med specialtegn, f.eks. '$'

Opdel document.cookie på semikolon i et array kaldet ca (ca = decodedCookie.split(';')).

Sløjfe gennem ca-arrayet (i=0; i < ca.length; i++), og aflæs hver værdi c=ca[i]).

Hvis cookien er fundet (c.indexOf(name) == 0), returner værdien af cookien (c.substring(navn.længde, c.længde).

Hvis cookien ikke findes, skal du returnere "".

En funktion til at tjekke en cookie

Til sidst opretter vi funktionen, der kontrollerer, om der er sat en cookie.

Hvis cookien er indstillet, vil den vise en hilsen.

Hvis cookien ikke er indstillet, vil den vise en promptboks, der beder om navnet på brugeren, og gemmer brugernavn-cookien i 365 dage ved at kalde funktionen setCookie:

Eksempel

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);
      }
  }
}

Alle sammen nu

Eksempel

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);
      }
  }
}

Prøv det selv →

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

Eksemplet ovenfor kører funktionen checkCookie(), når siden indlæses.