Gérer
les cookies en JavaScript
Pas besoin de disposer d'une technologie côté serveur pour se souvenir du passage d'un internaute ou stocker des informations sur le disque de l'internaute. Voyons comment JavaScript permet lui aussi de manipuler des cookies.
Selon un récent sondage paru sur le Journal
du Net, près de 58 % des internautes acceptent systématiquement
les cookies (952 votants). Ils sont près de 24% à
les accepter "parfois", et un peu moins de 13% à
les refuser en bloc.
Cela laisse une bonne marge de manoeuvre aux webmasters qui profitent
de ces petits fichiers stockés sur nos disques durs par l'intermédiaire
de nos navigateurs, pour établir des statistiques, ou nous
éviter de retaper notre login à chacune de nos visites.
Voyons comment JavaScript permet de les manipuler.
Le choix du cookie : temporaire ou permanent
?
Par défaut un cookie n'a pour durée de vie que celle
de la session du navigateur. Une fois celui-ci fermé,
toutes les informations qu'il contenait sont perdues. Une telle
utilisation des cookies suffit dans bien des cas. Ces cookies sont
temporaires et uniquement stockés en mémoire.
Cette méthode a cependant ses limites si vous souhaitez que
votre site se souvienne du login ou du panier électronique
d'un internaute par exemple. Dans ce cas le cookie doit être
permanent et écrit sur le disque dur.
Pas question de faire n'importe quoi cependant, les navigateurs
ne peuvent stocker que 300 cookies à la fois, pas plus de
4 Ko chacun et 20 cookies par serveur (domaine) maximum.
Commençons par les cookies temporaires. JavaScript vous
permet de les définir de manière très simple.
Au minimum on doit trouver :
document.cookie = "nom_du_cookie=valeur_du_cookie"
Vérifions le bon déroulement de ce code en créant
un cookie "JDN" :
document.cookie = "Auteur_Tutoriel=Arnaud";
alert(document.cookie);
Ce lien vous permet de créer vous-mêmes le cookie et
de regarder ce que donne un alert(document.cookie);
Nous venons de créer un cookie temporaire, qui n'est pas
écrit sur le disque et réside en mémoire. Que
se passe t'il si nous rajoutons une autre variable ?
document.cookie = "Langage_Tutoriel=JavaScript";
Créez le second champ du cookie avec le lien suivant et
regardez de nouveau le contenu du cookie avec alert(document.cookie");
On observe ici que les deux liens "alert" sont identiques,
c'est la valeur du cookie en mémoire qui a éte modifiée.
Attention, la valeur d'un cookie ne doit contenir aucun
"espace", virgule ou point-virgule.
A cette syntaxe minimale s'ajoute d'autres paramètres facultatifs
:
- La définition du domaine du serveur qui a crée le
cookie.
- Le besoin d'utiliser un cookie sécurisé.
- Le chemin de l'URL pour lequel le cookie est valide.
- La date d'expiration
Par défaut un cookie est accessible à toutes les
pages du même répertoire que la page qui l'a crée.
Les pages des éventuels sous-répertoires concernés
peuvent aussi y accéder.
Si vous souhaitez qu'un cookie soit lu par plusieurs de vos sous-domaines,
définissez un paramètre "domain=.votre_site.com"
et un paramètre path="/" par exemple. Ainsi vos
sous domaines pourront accéder à ce cookie.
Il faut noter que le paramètre "domain" doit posséder
systématiquement deux points :
- .votre_site.com ou alors :
- http://www.votre_site.com
Nous avons vu comment créer un cookie temporaire, voyons
maintenant comment écrire sur le disque un cookie permanent.
Il suffit de reprendre la même syntaxe que précedemment
en lui ajoutant le paramètre "expire" :
var expire = new Date();
var unAn = expire.getTime() + (365*24*60*60*1000);
expire.setTime(unAN);
document.cookie = "JDNCookie=Test; expires=" + expire.toGMTString();
Quelques explications sont nécessaires ici.
L'objet "Date" permet de créer une date à
partir de celle du jour.
La méthode "getTime()" retourne une valeur numérique
correspondant à l'heure pour une date spécifiée. Il faut alors calculer
le nombre de secondes contenues en un an.
On applique ensuite la méthode setTime à notre objet
"expire" afin de définir une durée de vie
du cookie de 365 jours.
Enfin, il faut convertir la date en GMT (Greenwich Mean Time), c'est
le standard de référence.
Ce type de cookie est stocké le disque dur de l'internaute.
(Ne cherchez pas, nous ne l'avons pas défini ici).
Lire un champs précis et supprimer
le contenu de notre cookie
Commençons par le plus simple, supprimer le cookie. Dans
le cas d'un cookie temporaire, fermez le navigateur et le cookie
disparaîtra. Pour un cookie "permanent", il suffit
de définir une date d'expiration inférieure
à la date du jour, par exemple :
document.cookie = "JDNCookie=Test; expires=Thu,
01-Jan-70 00:00:01 GMT"
Si le cookie existe déjà, cette instruction mettra
à jour sa date d'expiration avec la nôtre et le navigateur
supprimera le cookie.
Si vous avez bien suivi jusqu'à maintenant vous savez lire
le contenu d'un cookie, il suffit d'afficher :
alert(document.cookie)
... pour accéder au contenu... total du cookie, et c'est
bien là le problème. Si vous n'avez écrit qu'une
seule variable dans votre cookie, alors tout va bien. Si par contre,
vous avez défini plusieurs champs (ce qui n'est pas un mal),
l'affaire se complique. En ce qui concerne les cookies temporaires,
peu importe que vous soyez sous IE, Netscape ou autre, si les lieux
d'emplacements physiques des cookies changent, la syntaxe de stockage
demeure.
Le contenu du cookie est en effet stocké dans une chaîne
de caractères où les champs sont séparés
par des points-virgules.
Il va donc falloir "parser" (analyse syntaxique)
cette chaîne afin d'obtenir ce que l'on souhaite. Cette méthode
est valable quelle que soit la durée de vie du cookie, temporaire
ou permanent.
Nous avons déjà crée sur cette page un cookie
composé de deux champs : rappelez-vous lorsque vous visualisiez
leur contenu avec l'instruction "alert()".
Il s'agit des champs "Auteur_Tutoriel" et "Langage_Tutoriel".
Ces deux champs sont là, quelque part en mémoire.
Nous cherchons donc ici à extraire une valeur de ce cookie,
disons celle de "Langage_Tutoriel". Voici la fonction
qui va nous permettre d'y parvenir :
<script>
function getCookieInfo(dataName)
{
var cookieLen = dataName.length;
var cookieData = document.cookie;
var allcookieLen = cookieData.length;
var i = 0;
var cookieEnd;
while(i < allcookieLen)
{
var
j = i + cookieLen;
if (cookieData.substring(i,j)
== dataName)
{
cookieEnd
= cookieData.indexOf(";", j);
if
(cookieEnd == -1)
{
cookieEnd
= cookieData.length;
}
return
unescape(cookieData.substring(j+1, cookieEnd))
}
i++;
}
return "Echec : cookie non cree ?";
}
</script>
Si vous avez crée au préalable lors de nos premiers
exemples les deux cookies, testez ce
que cela donne, vous devez obtenir une boîte de dialogue
indiquant "JavaScript".
Reprenons pas à pas cette fonction :
- "cookieLen" contient la longueur de la chaîne
passée en paramètre, ici "Langage_Tutoriel".
- "cookieData" contient l'intégralité des
données contenues dans le cookie.
- "allcookieLen" est la longueur totale du cookie.
Le principe est ensuite de parser la chaîne de caractères.
On décale et on compare, caractère par caractère,
le contenu d'une sous-chaîne de "cookieLen" caractères
par rapport à ce que l'on cherche, la chaîne "Langage_Tutoriel".
Une fois le nom du champ ("Langage_Tutoriel") repéré,
on cherche à ramener son contenu. Il faut pour cela se repérer
par rapport à l'éventuel point-virgule qui le suit.
La fonction "indexOf" nous indique si le champ recherché
est le dernier du cookie (auquel cas il n'y a pas de ";"
derrière lui).
La fonction "substring()" ramène ensuite le nombre
de caractères recherchés, en évitant le "="
que nous ne souhaitons pas inclure.
Vous êtes désormais prêts à utiliser
les fonctionnalités offertes par JavaScript pour manipuler
vos cookies sans avoir besoin d'utiliser un langage côté
serveur tel que Php, Asp ou Cold Fusion.
[Arnaud
Gadal 17 novembre 2001
, JDNet]
|