Een Cookie aanmaken en opslaan

In het voorbeeld maken we een cookie met de naam van de bezoeker. Bij het eerste bezoek aan de webpagina wordt gevraagd een naam in te geven. De naam wordt daarna in een cookie opgeslagen. Bij een volgend bezoek aan de webpagina wordt een persoonlijk begroeting weergeven.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Cookies</title>
  <script type="text/javascript">
    function setCookie(c_naam, waarde, dagen){
      /* Deze functie slaat de naam van de gebruiker op in een cookie
      De argumenten van de functie bevatten de naam van de cookie, de inhoud (waarde) van de cookie en het aantal dagen dat de cookie geldig blijft*/
      var vervaldatum = new Date();
      // Bereken de vervaldatum van de cookie
      vervaldatum.setDate(vervaldatum.getDate() + dagen);
      // Stel de inhoud van de cookie samen
      // de escape opdracht zorgt dat niet conventionele karakters correct worden opgeslagen
      // cookies gebruiken datums in het UTC standaardformaat
      var c_waarde = escape(waarde) + ((dagen == null) ? "" : "; expires=" + vervaldatum.toUTCString());
      // Maak de cookie aan (sla de cookie op)
      document.cookie = c_naam + "=" + c_waarde;
    }
    function getCookie(c_naam){
      /* Deze functie maakt een array van de cookie namen en waarden,
      controleert of de cookie naam bestaat en
      geeft de inhoud van de cookie terug */
      var i, x, y, ARRcookies;
      // splits de inhoud van de cookies op en plaats deze in een array
      ARRcookies = document.cookie.split(";");
      // doorloop de array met cookies
      for (i = 0; i < ARRcookies.length; i++){
	// de naam van de cookie staat voor het = teken
	x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
	// de waarde van de cookie staat na het = teken
	y = ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
	// verwijder alle witruimte voor (^\s+) en achter de naam van de cookie (\s+$)
	x = x.replace(/^\s+|\s+$/g,"");
	// controleer of de cookie met de opgegeven naam bestaat
	if (x == c_naam){
	  // geef de waarde van de gevonden cookie terug
	  return unescape(y);
	}
      }
    }
    function checkCookie(){
      /* Deze functie geeft een begroeting weer als de cookie bestaat,
      of vraagt naar de gebruikersnaam indien de cookie niet bestaat*/
      // lezen van de cookie variabele
      var gebruikersnaam = getCookie("gebruikersnaam");
      if (gebruikersnaam != null && gebruikersnaam != ""){
	// bij een geldige gebruikersnaam, de begroeting weergeven
	document.getElementById("welkom").innerHTML = gebruikersnaam + ", wij heten u terug van harte welkom op onze webpagina.";
      } else { // bij een ongeldige gebruikersnaam, naar een nieuwe gebruikersnaam vragen
	gebruikersnaam = prompt("Indien gewenst, kunt u hier uw naam ingeven:","");
	if (gebruikersnaam != null && gebruikersnaam != ""){
	  // bij een geldige gebruikersnaam een cookie aanmaken
	  setCookie("gebruikersnaam", gebruikersnaam, 365);
	}
      }
    }
  </script>
</head>
<body onload="checkCookie();">
  <h3 id="welkom">Welkom op onze webpagina.</h3>
</body>
</html>

Na het laden van de pagina in de browser (onload) wordt de cookie gelezen of aangemaakt.

Om een cookie een andere waarde te geven, overschrijf je de oude cookie met de nieuwe waarde.

Om een cookie te wissen, maak je een cookie zonder waarde ("") en zonder vervaldatum (0), de cookie wordt dan bij het sluiten van de browser of het verlaten van de site opgeruimd.

Weergeven