Les cookies en JavaScript

Les cookies, que nous devons à Netscape, nous permettent de stocker des informations sur la machine du visiteur. Ces informations permettent le réglage de nombreuses options de personnalisation du site, en fonction des choix du visiteur, afin de lui éviter de régler ces options à chaque visite, ou pire, à chaque page.

Le cookie ne peut contenir que ce que l'utilisateur a bien voulu donner comme information, il ne pourra jamais récupérer les informations à l'insu du visiteur.

Quelques exemples d'utilisations de cookies :

  • Choix de la langue.
  • Personnalisation des effets graphiques du site.
  • Variables à transmettre d'une page à l'autre.
  • Mot de passe pour un accès à une partie réservée du site.

Le langage JavaScript nous permet de manipuler ces cookies... Le type d'informations à stocker n'a aucune influence sur le code. Un cookie est donc un simple fichier de texte qui contient une chaîne de caractères reprenant les informations concaténées.

Inhoudsopgave Haut

Que contiennent les cookies ?

Nous pouvons regarder la fonction setCookie (qui permet de créer un cookie) pour avoir une idée des différentes parties d'un cookie.

  1. function setCookie(name, value) {
  2. var argv=setCookie.arguments;
  3. var argc=setCookie.arguments.length;
  4. var expires=(argc > 2) ? argv[2] : null;
  5. var path=(argc > 3) ? argv[3] : null;
  6. var domain=(argc > 4) ? argv[4] : null;
  7. var secure=(argc > 5) ? argv[5] : false;
  8. document.cookie=name+"="+escape(value)+
  9. ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
  10. ((path==null) ? "" : ("; path="+path))+
  11. ((domain==null) ? "" : ("; domain="+domain))+
  12. ((secure==true) ? "; secure" : "");
  13. }

Inhoudsopgave Haut

Nom du cookie

Un cookie doit posséder un nom. Ce nom est obligatoire car il est la clé qui permet d'accéder à une valeur alphanumérique. Normalement les noms sont insensibles à la casse1.

Le nom ne peut contenir certains caractères (comme le point-virgule, la virgule, l'espace). Si nous désirons utiliser ces caractères (ce qui ne me semble d'aucune utilité) nous devons utiliser l'encodage des URL par l'appel à la fonction JavaScript escape.

Partie du code :

  1. document.cookie=name+"="+value;

Inhoudsopgave Haut

Expiration du cookie

Nous pouvons spécifier une date de validité du cookie avec l'attribut expires. Après cette date, le cookie est détruit. Si nous ne spécifions aucune date, le cookie n'existera plus quand la session de l'utilisateur sera terminée (par exemple quand le navigateur sera fermé).

La valeur est une date sous le format Wdy, DD-Mon-YYYY HH:MM:SS GMT avec 

  • Wdy pour le « jour de la semaine » (en anglais, “week day”) sur trois caractères.
  • DD pour le « jour du mois » (en anglais, “day”) sur deux caractères.
  • Mon pour le « mois » (en anglais, “month”) sur trois caractères.
  • YYYY pour l'« année » (en anglais, “year”) sur quatre caractères.
  • HH pour l'« heure » (en anglais, “hour”) sur deux caractères en format de 0 à 24.
  • MM pour les minutes sur deux caractères.
  • SS pour les secondes sur deux caractères.
  • GMT pour le « temps moyen de Greenwich » (en anglais, “Greenwich Mean Time”).

Partie du code :

  1. "; expires="+expires.toGMTString()

Exemple de code :

  1. document.cookie="email=herbert@simon.net; expires=Sun, 17-Nov-2024 23:35:16 GMT";

Nous pouvons aussi calculer une durée en JavaScript :

  1. var date_exp = new Date();
  2. //durée de vie de 365 jours
  3. date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
  4. document.cookie="user=Robert Boyle; expires="+date_exp.toGMTString();

Inhoudsopgave Haut

Domaine du cookie

Nous ne spécifierons pratiquement jamais le domaine du cookie. Si il n'est pas renseigné, le nom du serveur sera automatiquement utilisé.

Inhoudsopgave Haut

Chemin du cookie

Nous pouvons définir la portée du cookie avac l'attribut path, pour spécifier que le cookie ne s'applique que pour un sous-répertoire ou un fichier.

Inhoudsopgave Haut

Type de connexion du cookie

L'attribut secure nous permet de déterminer le type de connexion : normale ou chiffrée. Si l'option secure est activée, le navigateur ne pourra utiliser le cookie que si la connexion est en SSL ou S-HTTP.

Inhoudsopgave Haut

Version du cookie

La spécification prévoit un numéro de version pour les cookies, mais cette information est rarement présente.

Le numéro de version peut avoir une grande importance dans le cas oû nous avons défini une date d'expiration qui n'est pas encore atteinte et que nous désirons invalider ou modifier certaines valeurs. Si le numéro de version n'est pas présent, la seule manière de procéder est d'attribuer un nouveau nom au cookie (mais dans ce cas, l'ancien cookie sera toujours présent, ce qui peut poser problème car il existe une limite au nombre de cookies qu'un navigateur accepte par site).

Inhoudsopgave Haut

Limitations des cookies

Selon la spécification, les navigateurs devraient être capables de supporter au moins 300 cookies, un poids minimum de 4Ko par cookie, et un total minimum de 20 cookies par site ou domaine.

Inhoudsopgave Haut

Comment utiliser les cookies ?

Les fonctions

  1. var glob_finCookie="Sun, 17-Nov-2024 23:35:16 GMT";
  2.  
  3. function setCookie(name,value){
  4. document.cookie=name+"="+value+";expires="+glob_finCookie;
  5. }
  6.  
  7. //Lecture d'un cookie
  8. //retourne une chaine vide si le cookie n'existe pas
  9. function getCookie(name){
  10. var cookie_existe=false;
  11. var cookie_debut=0;
  12. var cookie_fin=0;
  13. var cookie_doc=document.cookie;
  14. var i=0;
  15. while (i<=cookie_doc.length){
  16. cookie_debut=i;
  17. cookie_fin=cookie_debut+nameCookie.length;
  18. if (cookie_doc.substring(cookie_debut,cookie_fin)==name){
  19. cookie_existe=true;
  20. break;
  21. }
  22. i++;
  23. }
  24. if (cookie_existe){
  25. cookie_debut=cookie_fin+1;
  26. cookie_fin=document.cookie.indexOf(";",cookie_debut);
  27. if(cookie_fin<cookie_debut){
  28. cookie_fin=document.cookie.length;
  29. }
  30. return document.cookie.substring(cookie_debut,cookie_fin);
  31. }
  32. return "";
  33. }

Création du cookie dans un document html

  1. <a href="javascript:setCookie('msg','bonjour')"><img src="bouton.gif" />Cliquez-ici</a>

Affichage du cookie dans un document


Codes HTML, JavaScript, HTML  (17 lignes) :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <title>Test Cookie</title>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. </head>
  5. <h1>Test de cookie</h1>
  6. <script type="text/javascript">
  7. //<![CDATA[
  1.  
  2. document.write(getCookie('msg'));
  1.  
  2. //]]>
  3. </script>
  4. </body>
  5. </html>

Inhoudsopgave Haut

Où sont stockés les cookies ?

Ce tableau permet d'avoir un premier aperçu des différents endroits de stockage des cookies, mais la localisation des cookies varie selon la configuration du système d'exploitation et la version du navigateur.

NavigateurVersionSystème d'exploitation#Localisation
NavigateurVersionSystème d'exploitation#Localisation
OperaUcookiesX.dat
Exemple : C:\Program Files\Opera\cookies4.dat
NetscapeUcookie.txt
Exemple : C:\Program Files\Netscape\Users\Nomsite\cookies.txt
NetscapeLinuxUcookie.txt
∼/.netscape/cookies.txt
Netscape4Windows 9xUcookie.txt
%programfiles%\Netscape\Users\default\cookies.txt
%programfiles% correspondant le plus souvent à C:\Program Files
Netscape7Windows 2000/XpUcookie.txt
%HOMEPATH%\Application Data\Mozilla\Profiles\\cookies.txt
%HOMEPATH% correspondant le plus souvent à C:\Documents and Settings
Internet Explorer1.5Windows NTM%SystemRoot%\cookie.jar
%SystemRoot% correspondant le plus souvent à C:\WINNT
Internet Explorer2.0Windows toutes versionsM%programfiles%\Plus!\Microsoft Internet\cookie.jar
Internet Explorer3.0Windows NT 3.51Memcookie.dat dans le répertoire d'installation de IE.
Internet Explorer3.0Windows NT4M%SystemRoot%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\james_mill@infobrol.txt
Internet Explorer3.0Windows 9xM%WinDir%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\james_mill@infobrol.txt
Internet Explorer>4Windows NT4M%SystemRoot%\profiles\%USERNAME%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\james_mill@infobrol.txt
Internet Explorer>4Windows 9xM%WinDir%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\james_mill@infobrol.txt
Internet Explorer>4Windows 2000/XpM%USERPROFILE%\Cookies\%USERNAME%@.txt
Exemple :
C:\Users\james_mill\Cookies\james_mill@infobrol.txt
  • Colonne 3 (Système d'exploitation) : Windows 9x=Windows 95+Windows 98+Windows ME
  • Colonne 4 (#) : U=fichier unique; M=fichiers multiples (un par serveur)

Nederlandse vertaling

U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

Bij voorbaat dank.

Document heeft de 19/03/2002 gemaakt, de laatste keer de 31/10/2018 gewijzigd
Bron van het afgedrukte document:https://www.gaudry.be/nl/javascript-cookie.html

De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.

Notes
  1.  Sensible à la casse : cela signifie qu'une distinction est faite entre les lettres majuscules et minuscules.

  2.  Uniform Resource Locator : komt overeen met « localisateur uniforme de ressource » en français

  3.  URL : “Uniform Resource Locator” (en français, « localisateur uniforme de ressource »)

  4.  jour de la semaine : komt overeen met “week day” en anglais

  5.  jour du mois : komt overeen met “day” en anglais

  6.  mois : komt overeen met “month” en anglais

  7.  année : komt overeen met “year” en anglais

  8.  heure : komt overeen met “hour” en anglais

  9.  temps moyen de Greenwich : komt overeen met “Greenwich Mean Time” en anglais

Inhoudsopgave Haut