Voortgezet onderwijs | ThinkQuest Jr Webplek

Kennisnet.nl

Hoe maak je een... Opslag van gegevens met cookies

Gepubliceerd op 21 april 2006

Functie:
Cookies zijn gegevens die opgeslagen staan op de computer van de bezoeker. Ze stellen de website in staat om gegevens die eenmaal ingevoerd zijn door de bezoeker te bewaren en later weer aan te bieden.

Algemene werking:

Er wordt een HTML formulier aangeboden waarop de bezoeker gegevens kan invoeren
Met de Javascript eigenschap document.cookie zijn gegevens direct op te slaan als cookie en kunnen hiermee ook worden uitgelezen

Methode 1: Javascript en het DOM (aangeraden)

Download hier [HTML 0 Kb ]

Bekijk hier (vul iets in - sla het op, sluit de pagina en open deze opnieuw!)

HTML bestand (ingekort; zie downloadversie voor de complete versie met uitleg):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head><title></title>
  <script type="text/javascript">
  function lees_cookie()
  {
   var inhoud = "nog geen cookie inhoud";
   if(document.cookie != "")
   {
    inhoud = document.cookie;
   }
   var cookie_inh = document.getElementById("cookie_inhoud");
   cookie_inh.firstChild.nodeValue = inhoud;
  }
  function sla_op_in_cookie(tekst)
  {
   var verval_datum = new Date;
   verval_datum.setMonth(verval_datum.getMonth() + 3);
   document.cookie = tekst + "; expires =" + verval_datum.toGMTString() + ";";
   lees_cookie();
  }
  function voorbereiding()
  {
   var form = document.getElementById("cookie_knop");
   var input = document.getElementById("input");
   form.onclick = function()
   {
    sla_op_in_cookie(input.value);
    return false;
   }
   lees_cookie();
  }
  window.onload = voorbereiding;
  </script>
</head>
<body>
 <h3>Inhoud Cookie:</h3>
 <p id="cookie_inhoud">Inhoud van cookie..</p>
  <input type="text" id="input"></input>
  <a href="#" id="cookie_knop">[sla dit op]</a>
</body>
</html>

LET OP: Het is slimmer om de Javascript code in een eigen bestand te plaatsen en vanuit de HTML pagina te verwijzen met < script src="bestand.js" type="text/javascript">

Verdere uitleg en varianten

Een goede Engelse handleiding