Rechercher  

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]

Les outils de développement dans le Guide des Solutions
e-business

L'encyclopédie JDNet Toutes les notions pratiques, techniques et économiques relatives à l'e-business.
>> Accès à la rubrique "Développement"

Comparez les prix Matériel, PDA, modems...
Les bonnes affaires de la high-tech avec Kelkoo.
>> Comparateur