Les cookies en JavaScript

Sommaire du document

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.

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.

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

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 casse^[1].

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 :

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

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 :

"; expires="+expires.toGMTString()

Exemple de code :

document.cookie="email=edward@feigenbaum.info; expires=Thu, 09-Feb-2012 20:59:25 GMT";

Nous pouvons aussi calculer une durée en JavaScript :

var date_exp = new Date();
//durée de vie de 365 jours
date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
document.cookie="user=Steve Jobs; expires="+date_exp.toGMTString();

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é.

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.

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.

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).

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.

Les cookies de ce site

Voici quelques cookies générés par ce site :

• Nom : brSearch
  • Valeur : cookie non présent
  • Description : La partie Recherche du menu est étendue (1) ou pas (0). Valeur par défaut : 0
• Nom : brMbr
  • Valeur : cookie non présent
  • Description : La partie Utilisateur du menu est étendue (0) ou pas (1). Valeur par défaut : 0
• Nom : brNav
  • Valeur : cookie non présent
  • Description : La partie Navigation du menu est étendue (0) ou pas (1). Valeur par défaut : 0
• Nom : brSkin
  • Valeur : cookie non présent
  • Description : La partie Apparence du menu est étendue (1) ou pas (0). Valeur par défaut : 0
• Nom : brStat
  • Valeur : cookie non présent
  • Description : La partie Stats du menu est étendue (1) ou pas (0). Valeur par défaut : 0
• Nom : skin
  • Valeur : cookie non présent
  • Description : L'apparence du site (le style sélectionné par le visiteur).
    • 0 (sans style)  : Page sans feuille de style
    • l (Sans couleurs)  : Simple feuille de style de mise en page.
    • b (Gris-blanc)  : Style minimum, peu de couleurs.
    • 1 (Gris-Bleu-Orange)  : Dominante de gris, titres en orange, fond de page gris-bleu, fond de texte gris clair.
• Nom : showFB
  • Valeur : cookie non présent
  • Description : Afficher ou pas les interractions avec FaceBook.

Pour les cookies du menu (ceux dont le nom débute par br...), la valeur 1 signifie que la valeur est opposée à la valeur par défaut.

Comment utiliser les cookies ?

Les fonctions

var glob_finCookie="Thu, 09-Feb-2012 20:59:25 GMT";
 
function setCookie(name,value){
	document.cookie=name+"="+value+";expires="+glob_finCookie;
}
 
//Lecture d'un cookie
//retourne une chaine vide si le cookie n'existe pas
function getCookie(name){
	var cookie_existe=false;
	var cookie_debut=0;
	var cookie_fin=0;
	var cookie_doc=document.cookie;
	var i=0;
	while (i<=cookie_doc.length){
		cookie_debut=i;
		cookie_fin=cookie_debut+nameCookie.length;
		if (cookie_doc.substring(cookie_debut,cookie_fin)==name){
			cookie_existe=true;
			break;
		}
		i++;
	}
	if (cookie_existe){
		cookie_debut=cookie_fin+1;
		cookie_fin=document.cookie.indexOf(";",cookie_debut);
		if(cookie_fin<cookie_debut){
			cookie_fin=document.cookie.length;
		}
		return document.cookie.substring(cookie_debut,cookie_fin);
	}
	return "";
}

Création du cookie dans un document html

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

Affichage du cookie dans un document

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
	<title>Test Cookie</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="CONTENT-LANGUAGE" CONTENT="fr">
</head>
<body>
	<h1>Test de cookie</h1>
	<script language="JavaScript" type="text/javascript">

 
	document.write(getCookie('msg'));

 
	</script>
</body>
</html>

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.

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
   
   

Structure du document