Les cookies en JavaScript

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

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;

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 :

"; expires="+expires.toGMTString()

Exemple de code :

document.cookie="email=berkeley.george@infobrol.pro; expires=Sat, 21-Dec-2024 12:54:23 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=Leonhard Euler; 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

Les fonctions

var glob_finCookie="Sat, 21-Dec-2024 12:54:23 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">
</head>
<body>
	<h1>Test de cookie</h1>
	<script type="text/javascript">
	//<![CDATA[

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

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

Table des matières Haut