Gérer les cookies en JS

Retour au menu

Pourquoi les cookies ?

On peut définir les cookies comme la "mémoire du WEB".

Ils constituent la seule façon de s'affranchir de l'impossibilité d'écrire sur le disque du navigateur client (on rappelle que JavaScript ne possède pas d'instructions d'entrées-sorties fichiers).
Le mécanime de pose de "cookies" a été imaginé pour permettre au moins à un serveur de retrouver certains résultats de sa consultation précédente du client.
Pour cela, le serveur écrit sur le disque client quelques informations qu'il pourra chercher et réexaminer lors d'une prochaine visite du même "client".
Ces renseignements sont stockés sous forme de chaine de caractères, dans un seul fichier au format texte, appelé cookies.txt par Netscape.
Et ils restent stockés, à l'insu de l'utilisateur client le plus souvent pendant toute leur durée de vie, le "risque" dans ce dispositif étant l'effacement du fichier cookies.txt !

Observations

Vérifier le paramètre suivant de votre navigateur
Menu Edition/Préférences/Avancées/, activer :

"accepter uniquement les cookies quiseront renvoyés à leur serveur d'origine"
"M'avertir avant d'accepter un cookie"

La présente page abrite un cookie, à des fins de démonstration, nommé CompterPassageCoursCookie.

Il contient seulement la chaine de caractères CompterPassageCoursCookie = n, où n est un entier qui compte le nombre de chargements de la présente page, par la même machine cliente.
Recharger la page. A chaque fois on reçoit une demande du navigateur .
Lisez bien ce message : il contient
- exactement la chaine qui sera stockée et qui constitue le cookie
- sa date de fraicheur
- il sollicite votre décision : l'acceptez vous ?

Comment le cookie CompterLesPassages a t-il été noté ?

Ouvrir le fichier Program Files/Netscape/Users/default/cookies.txt

On y trouve une 1ère ligne du genre

FALSE  /D|/javascript/Jour4	FALSE 959810400	CompterPassageCoursCookie 4

Enregistrement d'un cookie

Durant la session Web, chaque cookie est conservé en mémoire, il y a écriture sur disque à la fermeture du navigateur. L'écriture s'effectue sur instruction du serveur utilisant la directive HTTP suivante (incluse dans l'en-tête)

Set-Cookie 
  nom=valeur; [expires =date; path= chemin-client; domain= nom-domaine; secure]

Seul le 1er champ, le nom identifiant le cookie et sa valeur (chaine de caractères stockée) sont obligatoires.
date est la date d'expiration, au delà de laquelle le cookie sera supprimé du fichier
chemin nom du rép. serveur
nom-domaine nom du domaine Internet dans lequel le cookie peut être traité, les autres serveurs devant l'ignorer
secure le cookie ne peut être consulté qu'au cours d'un échange sécurisé.

Ecrire un cookie

Voici le code gérant le cookie CompterPassageCoursCookie

<SCRIPT LANGUAGE="JavaScript">
// la date d'expiration
var futur = new Date(2005,1,1);

function CompterLesPassages () {
// fonction pour mettre en évidence le cookie
n = RechercherLeCookie("CompterPassageCoursCookie");
opts="width=200,height=20,,screenX=400,screenY=10"
fen = open("", "Delicious_Cookies",opts);
fen.document.write("Page chargée "+ n + " fois !<P>
	Vous reprendrez bien un de ces délicieux cookies ...");
fen.document.close();
id=setTimeout("fen.close();MiseAJourCookie (n);",2000);
}

function MiseAJourCookie (nb) {
// fonction de mise à jour du cookie
nb = eval(nb) + 1;
document.cookie = "CompterPassageCoursCookie=" + nb + ";
	 expires=" + futur.toGMTString();
}

function RechercherLeCookie (unArgument) {
// recherche de notre cookie dans la chaine gérée par le navigateur
// cette chaine est une propriété de l'objet document
var chaine = document.cookie ;
unArgument = unArgument + "=";
var longueur = unArgument.length ;
var resultat;
if(chaine.length > 0) {
 debut = chaine.indexOf( unArgument , 0 );
 if (debut >= 0)	{
   fin = chaine.indexOf( ";" , debut+longueur );
   if (fin >= 0)
	resultat = unescape(chaine.substring(debut+longueur,fin));
   else
	resultat = unescape(chaine.substring(debut+longueur,chaine.length));
   }
 else resultat = 0;
 }
else resultat = 0;
return resultat;
}

Supprimer un cookie

Comment supprimer notre cookie CompterPassageCoursCookie ? La méthode la plus simple consiste à le réenregistrer en lui attribuant une date d'expiration dépassée !

<SCRIPT LANGUAGE="JavaScript">
// la date est dépassée !
var date = new Date(1999,0,1);
function EffacerCookie() {
//nom est le nom du cookie
document.cookie = "CompterPassageCoursCookie=" + ";expires=" + date.toGMTString();
}

Exercice

Etudions un autre exemple de cookie (réf. JavaScript/M. Dreyfus/Sybex)

Dans une page page.html, lors de sa première visite, on demande à l'utilisateur sa couleur préférée, dans une liste incluse dans la page choixCouleur.html, on change alors en conséquence la couleur de fond du présent document.
Un cookie, nommé couleur_du_fond est alors noté avec pour valeur le nom de la couleur choisie, il sera alors facile de la retrouver ... et de l'offrir au "client" lorsqu'il reviendra sur la même page !
On demande d'étudier les scripts de page.html et choixCouleur.html (dossier Jour4/exo-cookies) et d'éventuellement les compléter.