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.

Table des matières 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. }

Table des matières 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;

Table des matières 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=alan@kay.net; expires=Mon, 25-Mar-2024 14:42:33 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=Appleton Edward; expires="+date_exp.toGMTString();

Table des matières 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é.

Table des matières 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.

Table des matières 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.

Table des matières 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).

Table des matières 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.

Table des matières Haut

Comment utiliser les cookies ?

Les fonctions

  1. var glob_finCookie="Mon, 25-Mar-2024 14:42:33 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>

Table des matières 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\moshe_bennahman@infobrol.txt
Internet Explorer3.0Windows 9xM%WinDir%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\moshe_bennahman@infobrol.txt
Internet Explorer>4Windows NT4M%SystemRoot%\profiles\%USERNAME%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\moshe_bennahman@infobrol.txt
Internet Explorer>4Windows 9xM%WinDir%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\moshe_bennahman@infobrol.txt
Internet Explorer>4Windows 2000/XpM%USERPROFILE%\Cookies\%USERNAME%@.txt
Exemple :
C:\Users\moshe_bennahman\Cookies\moshe_bennahman@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)

Document créé le 19/03/2002, dernière modification le 31/10/2018
Source du document imprimé : https://www.gaudry.be/javascript-cookie.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes

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

  2.  Uniform Resource Locator : correspond à « localisateur uniforme de ressource » en français

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

  4.  jour de la semaine : correspond à “week day” en anglais

  5.  jour du mois : correspond à “day” en anglais

  6.  mois : correspond à “month” en anglais

  7.  année : correspond à “year” en anglais

  8.  heure : correspond à “hour” en anglais

  9.  temps moyen de Greenwich : correspond à “Greenwich Mean Time” en anglais

Table des matières Haut