Homepage » Tutorials » Javascript » Cookies aanmaken, lezen en verwijderen

Cookies aanmaken, lezen en verwijderen

Info 
Door: Mirax Moeilijkheidsgraad: 1/3
Geplaatst op: 16-06-2004Reacties: 6(Bekijken)
Views: 12522 (gem. 5.5066 per week) Log in om zelf te reageren
 Waardering:7/10 (2 stemmen)

Deze tutorial gaat over cookies, cookies geven je de mogelijkheid, om gegevens (dat kan van alles zijn, bijvoorbeeld het aantal bezoeken, of de taalvoorkeur) van een bezoeker te bewaren. Het is aan te raden om de beginnerstutorials JavaScript gelezen (en begrepen) te hebben voordat je aan deze begint.

Laten we maar gelijk beginnen met het benoemen van een cookie:

#Code
1
document.cookie="voorkeurstaal=nederlands";

In dit eenvoudige voorbeeld wordt document.cookie gebruikt om een (nieuwe cookie) te benoemen.

Met document.cookie kun je dan weer alle cookies, die gelden voor die pagina terughalen. Probeer bijvoorbeeld maar eens:
#Code
1
<a href="javascript:window.alert(document.cookie)">Toon cookies!</a>

Je zult zien dat dan in de alert staat 'voorkeurstaal=nederlands', maar wanneer je meerdere cookies gebruikt, krijg je,bijvoorbeeld te zien:
voorkeurstaal=nederlands; aantal_bezoeken=1; volgendevarname=waarde

Meer eigenschappen van cookies
Behalve de naam van de cookie, zijn er nog meer eigenschappen die op een cookie van toepassing zijn.
expires - Geeft aan tot wanneer de cookie geldig is. De waarde van expires is een datum in de vorm van toGMTString()
path - Geeft aan voor welke path (directory,map) de cookie geldig is. als er niks wordt ingevuld, wordt automatisch de path ingesteld van het document waaruit de cookie benoemd werd
domain - Zie path, maar dan voor domeinnaam
secure - Boleaanse waarde, dus true of false

Functie om een cookie te schrijven


Als je op je site meerdere cookies aanmaakt, is het misschien niet zo handig, om telkens document.cookie te herhalen. Het zou dan handiger zijn om hier een (eenvoudige) functie van te maken.
#Code
1
2
3
4
5
6
7
8
9
function setCookie(name, value, expires) {
    var deCookie = name + "=" + escape(value);
    if(expires){
        expires= expires.toGMTString();
        deCookie += "; expires="; 
        deCookie += expires; 
    }
    document.cookie = deCookie;
}

Hier zie je de functie setCookie, met drie parameters. Ik neem aan dat de betekenis hiervan wel duidelijk is. Op de eerste regel van de functie wordt de variabele 'deCookie' aangemaakt, die alvast de naam en de bijbehorende waarde krijgt. De escape functie wordt hier gebruikt, zodat leestekens worden behouden.
In het if statement wordt vervolgens bekeken of de parameter expires benoemd is, zo ja dan wordt ook deze waarde toegevoegd aan de variabele deCookie. In de laatste regel wordt tenslotte de cookie ook daadwerkelijk aangemaakt.
Het aanroepen van deze functie gaat nu heel eenvoudig:
#Code
1
setCookie('naamcookie','waarde cookie',new Date(2008,10,5))

Let op het gebruik van new Date, hier wordt de volgorde jaar, maand, dag aangehouden. De cookie zou dus verlopen in november 2008 (in computertermen bijna levenslang)

Functie om een cookie te lezen


Een gebruikelijk functie om een cookie weer te lezen, is de volgende:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  }
  else begin += 2;
  var end = document.cookie.indexOf(";", begin);
  if (end == -1)
    end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

Voor de geïnteresseerden volgt hier een uitleg van deze functie, als je dit niet bent, kun je gerust het volgende gedeelte overslaan.

De functie heeft slechts één parameter, namelijk de naam van de cookie. De variabele dc wordt voor het gemak aangesteld, dat staat voor de string document.cookie (dus in de vorm van 'a=x; b=y; c=z', we houden deze string in het vervolg even aan). De variabele prefix is de naam van de cookie, gevolgd door het isgelijk teken (=).
Dan begint het interessant te worden. De functie zoekt vanaf welke positie de substring '; varnaam=' voorkomt. Komt deze subtring niet voor, dan zal de waarde -1 de waarde van begin zijn, anders de positie van de puntkomma (;) in de string dc (document.cookie).
Vervolgens een ifstatement. Als de naam van de cookie niet bestaat, of de naam van de cookie is a, zal begin -1 zijn, en zullen de volgende twee regels worden uitgevoerd. Er wordt weer gezocht naar de naam van de cookie, en nu als 'varnaam='. Als de cookie bestaat, moet indexOf afgeven (hij moet immers aan het begin van document.cookie staan), zo niet, dan bestaat de gevraagde cookie dus niet.
Als de cookie wel had bestaan, maar niet in de eerste positie, dan was de waarde van begin, de positie van de puntkomma in de string document.cookie geweest, maar nu wordt er 2 bij opgeteld, zodat dit de eerste letter van de varnaam is. (Was de cookie de eerste van de serie, dan is deze positie dus nog steeds 0).
Hierna wordt bekeken wat de positie is van de volgende puntkomma na de eerste letter van de varnaam (merk nu ook op waarom escape werd gebruikt). Deze waarde wordt daarna end genoemd.
Als er geen puntkomma volgt (end is dus -1), dan is deze gevraagde cookie de laatste uit de reeks, en komt de positie van de laatste letter van de string (bij ons dus z) overeen met de lengte van de originele string document.cookie.
Tenslotte wordt in de laatste regel juist de substring van de waarde uit de totale string gevist. Door middel van unescape krijg je dan de originele waarde weer terug.

Niet geïnteresseerden lezen hier weer verder
Het gebruik van deze functie is wel weer makkelijk, bijvoorbeeld:
#Code
1
var waardecookie = getCookie('cookienaam');p


Het verwijderen van een cookie


Als je een cookie wilt verwijderen, moet je eigenlijk spelen met de al eerder genoemde waarde expires. Als deze waarde een waarde is van vóór de huidige tijd, dan zal deze cookie direct verlopen. Je kan hiervoor zelfs de functie setCookie gebruiken, maar we maken natuurlijk liever een eenvoudige functie aan.
#Code
1
2
3
4
5
6
7
8
function delCookie(name){
 expires = new Date(1970,1,1);
 expires = expires.toGMTString();
 deCookie = name
 deCookie += "=delete; expires=";
 deCookie += expires;
 document.cookie = deCookie;
}


Slot
Als het goed is kun je nu een heleboel met cookies. Zo kan je, in combinatie met nog meer javascript, de taalvoorkeur van bezoekers onthouden, tot minder functioneel het aantal bezoeken van een bezoeker bijhouden.

6 reacties
alex0705 Geplaatst op 18-10-2008 om 14:11
 

Regular		 ik zou graag een script maken waarbij er als je de website opstart een prompt komt met wat is jouw naam? daaronder kan je dan antwoorden, als je op ok drukt komt er welcome + "naam"
ik gebruik variables,maar ik weet niet hoe ik dit kan omzetten in een cookie zodat je dit niet altijd moet invullen voor je de stie bezoekt
joenes Geplaatst op 10-08-2006 om 15:18
 

Regular		 hmm nice tut
JelleV Geplaatst op 03-08-2006 om 17:43
Avatar van JelleV

Regular		 Ik snap hier dus helemaal niks van. Ik heb al verschillende uitleggen gehad maar snap het echt niet
Mirax Geplaatst op 19-08-2004 om 17:10
 

Moderator		 Bedankt voor deze uitwerking :)
Maar ik had het al gepost op het onderdeel Scripts.
Mirax Geplaatst op 17-06-2004 om 18:11
 

Moderator		 Bedankt voor het compliment :D
Ik zal vandaag of morgen eens een script schrijven (en posten) om de voorkeurstaal te onthouden.
Web-D-Zine Geplaatst op 17-06-2004 om 15:26
Avatar van Web-D-Zine

Regular		 Hey Mirax, zeer zeer interessant artikeltje!
Daar ik 0 de botten experience heb met cookies, zou je misschien eens een voorbeeldje kunnen uitwerken (heel simpel) hoe je via een cookie de voorkeurtaal van een bezoeker onthoudt zodat hij meteen naar de respectievelijke indexNL.htm of de indexFR.htm gaat?

Alvast bedankt,
ZEEEEER interessant!

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be