Javascript et les cookies

Avec JavaScript, il est possible de programmer les célèbres cookies.
Nous allons voir ici à quoi servent les cookies et comment stocker et récupérer des informations grâce à eux.
En bas de cette page, vous trouverez des exemples de programmation de cookies.

1 - A quoi servent les cookies ?

Les cookies sont très utilisés, par tous les sites commerciaux et par de plus en plus de sites perso. La raison est simple. Un cookie permet de stocker de manière permanente des informations sur le poste du visiteur, qui pourront être récupérées lors des futures visites.
Voyons quelques unes des principales informations stockées dans les cookies :

• Le nombre de visites, la date de la dernière visite,... (Exemple : Tout JavaScript.com)
• Un identifiant et un mot de passe pour une reconnaissance automatique du visiteur (Exemple : CDNow)
• Une liste de mots-clés utilisés dans les moteurs de recherche pour cibler les publicités à afficher (Exemple : beaucoup de moteurs de recherche)
• Une liste de paramètres de préférences de navigation pour personnaliser la page présentée (Exemple : Mon Yahoo !)
• Des informations à transférer d'une page à l'autre du site.

2 - Comment STOCKER des informations ?
Le type d'informations à stocker n'a aucune influence sur le code. Un cookie est un fichier de texte qui contient une chaîne de caractères contenant les informations concaténées.
Voici la fonction qui permet de stocker une information dans 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" : "");
}

La valeur à stocker est associée à un nom de cookie.
La date d'expiration permet de définir la longévité du cookie. Si elle est omise, le cookie est détruit à la fermeture du navigateur.
Le path indique simplement d'où vient le cookie.
Le nom de domaine permet d'identifier le cookie parmi tous ceux stockés sur la machine.
La variable secure indique si l'accès au cookie est protégé.


Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la fonction comme ceci :

 var pathname=location.pathname;
 var myDomain=pathname.substring(0,pathname.lastIndexOf('/')) +'/';
 var date_exp = new Date();
 date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
 // Ici on définit une durée de vie de 365 jours
 SetCookie("prenom","Arthur",date_exp,myDomain);

3 - Comment RECUPERER les informations ?

Voyons un cookie qui contiendrait les informations suivantes :

• prenom = Arthur
• nb_visite = 3

Pour récupérer l'information prenom, il faut extraire, de la chaîne de caractères composant le cookie, le nom de la variable soit prenom. La valeur de prenom est la chaine de caractères située immédiatement après et séparée par ';' et par ' '.
Voici le code des fonctions nécessaires à la récupération d'une information :

function getCookieVal(offset) {
 var endstr=document.cookie.indexOf (";", offset);
 if (endstr==-1)
        endstr=document.cookie.length;
 return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
 var arg=name+"=";
 var alen=arg.length;
 var clen=document.cookie.length;
 var i=0;
 while (i<clen) {
  var j=i+alen;
  if (document.cookie.substring(i, j)==arg)
                        return getCookieVal (j);
                i=document.cookie.indexOf(" ",i)+1;
                        if (i==0) break;}
 return null;
}

Si la variable demandée n'est pas contenue dans le cookie, elle est considérée comme valant null.
Pour récupérer la variable prenom, il suffit d'appeler la fonction :

 le_prenom=GetCookie("prenom");

Maintenant, vous savez tout. Il ne reste plus qu'à faire preuve d'imagination. La gestion des cookies est toujours la même, mais leur utilisation est illimitée :-)