Les cookies

Les cookies selon devedge

Définition

Un cookie est une chaîne de caractères de la forme <nom>=<valeur>. Les trois chaînes ci-dessous sont des cookies valides :

compteur=12
date=12/1/2004
marque=Porsche

Un cookie est éliminé dès que la session du navigateur se termine, mais il est possible de l'enregistrer sur disque. Dans ce cas, il est enregistré dans le fichier cookies.txt (NN, Mozilla) ou dans le répertoire c:\Documents and Settings\user\cookies (IE). Le répertoire cookies et le fichier cookies.txt sont les seules ressources accessibles par JavaScript.

Paramètres des cookies

Validité d'un cookie

Une page Web peut accéder à ses propres cookies ainsi qu'à ceux créés par les autres pages dans la même URL ou une URL plus générale, mais elle ne reconnaît pas les cookies créés par des pages situées dans les répertoires latéraux ou descendants.

Cookies valides pour le répertoire racine du site

Cookies valides dans le répertoire de cette page

Cookies valides dans un sous-répertoire de cette page

Spécifications de Netscape Navigator

1. Lecture du cookie

On accède aux cookies par la propriété cookie de l'objet document. Cette propriété contient la liste de tous les cookies, séparés par des points-virgules.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Sans titre</title>
<script>
function mfLireCookie()
{
if (document.cookie) {
document.write("<p>Contenu du cookie</p>") ;
document.write("<p>" + document.cookie + "</p>") ;
}
else {
document.write("<p>Il n'y a pas de cookie</p>") ;
}
}
</script>
</head>
<body onLoad="mfLireCookie()">
</body>
</html>

Il est souvent plus facile de transférer les cookies dans une variable, par exemple dc, puis de travailler avec cette variable.

dc=document.cookie ;
if (!dc) {
document.write("<p>Pas de cookie</p>") ;
}

Une fonction getCookie()

On voudrait maintenant disposer d'une fonction renvoyant la valeur d'un cookie dont on donne le nom. Par exemple, pour ranger dans n la valeur du cookie compteur, on écrirait :

n = getCookie("compteur") ;

Nous avons vu ci-dessus que la propriété cookie contient la liste des cookies séparés par des points-virgules. La première chose à faire est donc de les séparer. Nous nous servons pour cela de la méthode split(c) qui renvoie dans un tableau (Array) la liste des éléments d'une chaîne découpée sur le caractère c. Créons de la sorte le tableau cookies en découpant la chaîne dc sur le point-virgule :

cookies = dc.split(";") ;

Pour retrouver un cookie par son nom, il faut parcourir tous les cookies, séparer chacun d'eux en ses deux éléments <nom> et <valeur> et comparer le nom à la chaîne recherchée. Pour analyser un cookie en ses deux éléments nous utilisons à nouveau la méthode split(c) pour renvoyer dans le tableau tokens la liste des éléments (en programmation, un "token" est un élément d'une phrase).

function getCookie(nomCookie) {
var valeur = null ;
var dc = document.cookie ;
var cookies = dc.split(";") ;

for (var i = 0 ; i < cookies.length; i++) {

tokens = cookies[i].split("=") ;
nom = tokens[0] ;
if (nom == nomCookie) {

valeur = tokens[1] ;

}
}
return(valeur) ;
}

2. Ecriture d'un cookie

On écrit un cookie tout simplement en affectant le cookie à la propriété cookie. A la manière de php, nous pouvons écrire une fonction setCookie(nom, valeur), comme ceci :


function setCookie(nom, valeur) {
cookie = nom + "=" + valeur ;
document.cookie = cookie ;
}

Enregistrement d'un cookie

Pour enregistrer le cookie sur le disque dur, il faut préciser sa date d'expiration, obtenue en ajoutant au moment présent la durée de vie voulue (en millisecondes). Il faut ensuite convertir cette date en une chaîne de caractères au format GMT (méthode toGMTString() ) et l'affecter au paramètre "expires=" du cookie. Par exemple, pour calculer la date d'expiration d'un cookie d'une durée de vie de 80 jours, on écrit :

d = new Date() ;
maintenant = d.getTime() ;
plusTard = maintenant + 1000 * 60 * 60 * 24 * 80 ;
datexp = new Date(plusTard) ;
expires = datexp.toGMTString() ;
cookie += "; expires=" + expires ;

Nous sommes dès maintenant en mesure d'écrire, à la manière de PHP, une fonction setCookie(nom, valeur, duree)

function setCookie(nomCookie, valeur, duree) {
maintenant = new Date().getTime() ;
plusTard = new Date(maintenant + 1000*60*60*24*duree) ;
expires = plusTard.toGMTString() ;
if (duree) {
cookie = nomCookie + "=" + valeur + "; expires=" + expires ;
}
else {
cookie = nomCookie + "=" + valeur ;
}
document.cookie = cookie ;
}

3. Effacement d'un cookie

En soustrayant la durée de l’heure actuelle on obtient une date antérieure au moment présent et le cookie disparaît automatiquement.

function delCookie(nomCookie) {
maintenant = new Date().getTime() ;
plusTot = new Date(maintenant - 1000) ;
expires = plusTot.toGMTString() ;
cookie = nomCookie + "=" + "xyz ; expires=" + expires ;
document.cookie = cookie ;

}

 

Comment exploiter ces fonctions

Il faut créer ces fonctions dans un fichier qu'il suffira d'appeler depuis la page web qui doit faire appel à ces fonctions. Imaginons que nous créions de la sorte le fichier cookies.js dans le chemin ../js. Pour pouvoir faire appel à ce fichier, on écrit dans la page web, de préférence dans l'élément <head> l'instruction ci-dessous :

<script src="../js/cookies.js"></script>

Pour illustrer la technique, nous allons construire un système permettant de mémoriser les données introduites dans un formulaire. Au moment où l'utilisateur envoie le formulaire, une boîte de dialogue demande s'il faut enregistrer les données.

Prenez la peine d'afficher le code source de la page de démonstration pour découvrir dans le code HTML du formulaire les noms des trois champs du formulaire : titre_select, nom_txt, prenom_txt. Vous verrez également que le formulaire utilise l'événement onsubmit ci-dessous :

<body onload="mfLireInfos()">

 

<form name="formReservation"
method="post"
action=""
onsubmit="mfSauvegarde(this);return false" >

Comme l'événement renvoie false après avoir appelé la fonction mfSauvegarde(this), le formulaire ne sera jamais envoyé. Vous pouvez donc tester le formulaire sans crainte. L'élément <body> contient un événement qui appelle la fonction mfLireInfos().

La fonction mfSauvegarde(f) reçoit dans la variable f une référence sur le formulaire. Après avoir demandé confirmation de l'enregistrement par la méthode confirm(), elle transfère dans trois variables titre, nom et prenom les valeurs des champs du formulaire. Ensuite, elle appelle trois fois notre fonction setCookie pour créer les cookies "titre", "nom" et "prenom" qui auront une durée de vie de 24 jours.

La fonction mfLireInfos() appelle trois fois la fonction getCookie() avec le nom du cookie désiré et affecte la valeur de retour aux champs du formulaire. Remarquez bien l'utilisation de la propriété selectedIndex pour activer la bonne valeur dans la boîte de sélection.

<script type="text/JavaScript">
<!--

 

function mfSauvegarde(f) {

if (confirm("Voulez-vous enregistrer ces informations")) {

var titre = f.titre_select.value ;
var nom = f.nom_txt.value ;
var prenom = f.prenom_txt.value ;

setCookie("titre", titre, 24) ;
setCookie("nom", nom, 24) ;
setCookie("prenom", prenom, 24) ;
}

}

 

function mfLireInfos() {

document.formReservation.titre_select.selectedIndex = getCookie("titre") ;
document.formReservation.nom_txt.value = getCookie("nom") ;
document.formReservation.prenom_txt.value = getCookie("prenom") ;

}

 

//-->
</script>