Cookies in JavaScript
1. Wat is een cookie ?
2. Cookies in JavaScript
3. Een cookie plaatsen
4. Controleren of een cookie bestaat - (de waarde van) een cookie opvragen
5. Een cookie verwijderen
6. Opmerkingen
1. Wat is een cookie ?
Een cookie is een (text)bestand op jouw computer dat gegevens bevat
die afkomstig zijn van een bepaalde website. Een cookie stelt een gebruiker
in staat om ingestelde voorkeuren (zoals een bepaalde layout, de voertaal
et cetera) van een website te onthouden.
2. Cookies in JavaScript
Alle cookies van één bepaalde site worden in JavaScript voorgesteld door
één lange string. De namen en waarden van cookies zijn als volgt gescheiden:
<cookie_naam>=<cookie_waarde>;<cookie_naam>=<cookie_waarde>;<cookie_naam>=<cookie_waarde>
|
waarbij <cookie_naam> de naam van een cookie is, en <cookie_waarde> een URL-encoded
string (speciale karakters worden vertaald naar een hexadecimale (16-tallige) code,
bijvoorbeeld een ; (punt-komma; ASCII code 59) wordt %3B).
Deze lange string, die alle cookies van een site bevat, is als volgt op te vragen:
<script language="JavaScript">
<!--
document.write(document.cookie);
//-->
</script>
|
NB: Bij de bovenstaande opdracht zullen alleen die cookies worden weergegeven die geldig
zijn in de directory waarin het bovenstaande script draait (zie ook het onderdeel een
cookie plaatsen hieronder).
Zoals je ziet staan cookies niet in een apart object, maar staan in de property
"cookies" van het (sub-)object "document".
Dit (de property "cookies") is ook meteen alles wat JavaScript regelt omtrent cookies.
Er bestaan geen methoden in JavaScript (althans, voor zover ik weet) die je kunt
gebruiken voor het plaatsen, updaten of verwijderen van cookies. Het restant van deze
tutorial zal een aantal functies presenteren die je kunt gebruiken voor cookie-manipulatie
in JavaScript.
3. Een cookie plaatsen
Om een cookie op te slaan, moet je een string (met een vaste opmaak) toekennen aan de
cookie-property van het document-object. Het commando om een cookie op te slaan is als volgt opgebouwd:
document.cookie = "<cookie_naam>=<cookie_waarde>;expires=<verloop_datum>;path=<cookie_path>";
|
Uitleg:
<cookie_naam> |
de naam die je aan het cookie wilt geven |
<cookie_waarde> |
de waarde die je in het cookie wilt opslaan |
<verloop_datum> |
de verloopdatum van het cookie - deze moet in een speciaal formaat ingegeven worden
(in een zogenaamde GMT-string notatie, zie de voorbeelden hieronder)
wanneer je de verloopdatum weglaat, zal het cookie verlopen op het moment dat je de
browser afsluit |
<cookie_path> |
het pad op je website waarbinnen het cookie geldig is - als je het cookie binnen heel
je website geldig wilt laten zijn, vul je hier een slash ("/") in |
Voorbeeld:
Plaats een cookie "test_cookie" met als waarde "test" dat een maand geldig is, en op de hele site van kracht is:
<script language="JavaScript">
<!--
// maak een datum aan
var verloopt = new Date();
// tel hier een maand bij op
verloopt.setMonth(verloopt.getMonth() + 1);
// plaats het cookie
document.cookie = "test_cookie=test;expires="+verloopt+";path=/";
//-->
</script>
|
Voorbeeld:
Plaats een cookie "test_cookie" met als waarde "test" dat verloopt wanneer de browser gesloten wordt, en
in de folder "/temp" geldig is:
<script language="JavaScript">
<!--
document.cookie = "test_cookie=test;path=/temp";
//-->
</script>
|
Omdat in cookies komma's, puntkomma's en spaties worden gebruikt als scheidingstekens, mogen deze niet
voorkomen in de cookie-waarde. Je doet er dan dus ook verstandig aan om de cookie-waarde om te zetten
naar een URL-encoded string. Dit doe je in JavaScript met de escape-functie. Een functie die je voor het
setten van cookies kunt gebruiken wordt dus zoiets als:
function cset(naam, waarde, verloopdt, pad) {
document.cookie = naam+"="+escape(waarde)+";expires="+verloopdt+";path="+pad;
}
|
Je kunt dan een cookie plaatsen (dat een maand geldig is) met de volgende opdrachten:
<script language="JavaScript">
<!--
var verloopt = new Date();
verloopt.setMonth(verloopt.getMonth() + 1);
cset("test_cookie", "test", verloopt, "/");
//-->
</script>
|
Je zou de cset-functie ook zo kunnen schrijven dat je voor verloopdt een tijd (in seconden) ingeeft,
en dat deze tijd dan binnen de functie omgezet wordt naar een datum.
4. Controleren of een cookie bestaat - (de waarde van) een cookie opvragen
Wanneer we willen weten of een cookie bestaat, stuiten we al meteen op een probleem. We moeten
namelijk in de string document.cookie gaan zoeken om te kijken of het cookie (beter gezegd: een
bepaalde cookie-naam) hier in voorkomt. Dit doen we als volgt:
function csearch(naam) {
var str = document.cookie;
var zstr = naam + "=";
var start = str.indexOf(zstr, 0);
if(start == -1) {
return false;
} else {
start += zstr.length;
var eind = str.indexOf(";", start);
if(eind == -1) eind = str.length;
return unescape(str.substring(start, eind));
}
}
|
Uitleg:
function csearch(naam) {
|
De parameter "naam" is de naam van het cookie waar we naar zoeken. |
var str = document.cookie;
|
We maken van document.cookie een kopie binnen de functie, dat werkt
wat makkelijker dan telkens document.cookie gebruiken. |
var zstr = naam + "=";
|
De string waar we naar zoeken (de cookienaam, gevolgd door een =-teken
- denk aan de manier waarop cookies zijn opgeslagen in document.cookie). |
var start = str.indexOf(zstr, 0); |
De variabele "start" bevat na afloop van deze toekenning de startpositie
van de cookie-naam die wij zochten in document.cookie, of de waarde -1
als het cookie (de cookie-naam) niet voorkomt in document.cookie. |
if(start == -1) {
|
Controleer of de startpositie -1 is (oftewel controleer of het cookie
niet voorkomt in document.cookie). |
return false;
|
Als dit zo is, retourneer false (het cookie bestaat niet) |
} else {
|
Het cookie bestaat dus blijkbaar wel. |
start += zstr.length;
|
We verleggen de startpositie van de te retourneren (sub)string naar
na de cookienaam + het =-teken (dus de start van de cookiewaarde in de string). |
var eind = str.indexOf(";", start);
|
Bepaal de eindpositie van de gezochte cookie-string - het einde van een
cookie in document.cookie wordt gemarkeerd door een ";" (punt-komma). |
if(eind == -1) eind = str.length;
|
Het laatste (achterste) cookie van document.cookie heeft géén punt-
komma als eindmarkering, dus dan pakken we als eindpositie van het cookie
de eindpositie van str (de lengte van document.cookie). |
return unescape(str.substring(start, eind));
|
We retourneren hier meteen de inhoud van het cookie met de naam "naam"
(NB: de methode substring() pakt de substring van een string vanaf
karakter "start" tot en zonder karakter "eind").
De unescape-functie zorgt ervoor dat de URL-encoded inhoud terug wordt
vertaald naar zijn oorspronkelijke vorm. |
}
|
Einde if-statement waarin gekeken wordt of het cookie bestaat. |
}
|
Einde functie. |
5. Een cookie verwijderen
Je "verwijdert" een cookie door het cookie meteen te laten verlopen (en hierbij eventueel de cookie-waarde
leeg te maken). Stel, je wilt het cookie "test_cookie" (dat op de hele site geldig is) verwijderen, dan doe
je dit als volgt:
<script language="JavaScript">
<!--
var now = new Date();
document.cookie = "test_cookie=;expires="+now.toGMTString()+";path=/";
//-->
</script>
|
Let erop dat twee cookies met twee dezelfde namen, maar met verschillende paden als twee verschillende
cookies gezien worden.
Je zou dit dus ook in een functie kunnen vangen:
function cclear(naam, pad) {
var now = new Date();
document.cookie = naam+"=;expires="+now.toGMTString()+";path="+pad;
}
|
Het cookie uit het eerdergenoemde voorbeeld zou je dan kunnen verwijderen met:
<script language="JavaScript">
<!--
cclear("test_cookie", "/");
//-->
</script>
|
Als je pagina-opbouw mede afhangt van het al dan niet bestaan van een cookie
(en de waarde(n) in het cookie) kan het handig zijn als je bij het verwijderen
van een cookie je pagina herlaad. Een extra toevoeging aan de functie zou dus
kunnen zijn:
function cclear(naam, pad, reload) {
var now = new Date();
document.cookie = naam+"=;expires="+now.toGMTString()+";path="+pad;
if(reload) {
window.location.reload(true);
}
}
|
Het eerder genoemde cookie verwijderen en de pagina herladen kan dan met:
<script language="JavaScript">
<!--
cclear("test_cookie", "/", 1);
//-->
</script>
|
of
<script language="JavaScript">
<!--
cclear("test_cookie", "/", true);
//-->
</script>
|
Je moet er dan natuurlijk wel voor zorgen dat je pagina niet eindeloos ververst
wordt doordat cclear() telkens opnieuw wordt aangeroepen - controleer eerst of
het cookie wel bestaat, je hoeft het daarna maar één keer weg te gooien.
Op dezelfde manier kun je zo een refresh-attribuut toevoegen aan de functie voor het plaatsen van een cookie.
6. Opmerkingen
- JavaScript is clientside - je hebt dus niets te maken met "headers" of wat dan ook, alles kan meteen
aan de clientside worden afgehandeld
- JavaScript is clientside - als je veranderingen wilt weergeven die een (serverside) scriptingtaal
teweegbrengt op grond van cookies, zal de pagina ververst moeten worden.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4) 
Lees de nota's (0)