> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> Javascript

> AJAX et l'échange de données en JavaScript

> Les techniques AJAX

> Les cookies

> Lecture du tutoriel

Les cookies

Par

Sébastien de la Marck (Thunderseb) et Avatar

Johann Pardanaud (Nesquik69)

Mise à jour : 07/12/2010

Difficulté : Facile Facile

6 849 visites depuis 7 jours, dont 235 sur ce chapitre classé 33/786

Chapitre rédigé par Thunderseb

Compatibilité de la méthode
Méthode	Internet Explorer	Firefox	Opera	Google Chrome	Safari
Cookies	Oui	Oui	Oui	Oui	Oui

Retour en haut

Sommaire du chapitre :

Introduction
Ecrire un cookie
Lire un cookie
Infos complémentaires

Retour en haut

Introduction

Les cookies sont un système qui permet à un site web de stocker des informations textuelles au sein du navigateur. Le navigateur enregistre ces données dans des fichiers sur le disque dur de l'ordinateur.

Cookies are delicious delicacies

Les cookies servent à enregistrer des informations concernant le visiteur comme le nombre de pages visitées, le pseudonyme, la langue? Les cookies sont donc un moyen d'échanger des données, et c'est la raison pour laquelle je me dois de vous en parler.

Ce concept de cookie n'est absolument pas nouveau, mais comme je l'ai dit, il représente un système d'échange de données, et peut être utilisé pour mettre en place un système AJAX, comme nous le versons plus tard avec la technique de l'Images & Cookies Loading.

Pour en savoir plus sur les cookies, vous pouvez consulter la définition sur Wikipedia.
Les cookies en JavaScript

Il existe un objet cookie, sous-objet de document, qui contient la liste des cookies enregistrés pour le domaine visité. Seulement, cette liste de cookies est donnée sous la forme d'une chaîne de caractères, et JavaScript ne possède pas de méthodes ni de propriétés pour récupérer la valeur d'un cookie présent dans cette chaîne de caractères.

La « complexité » va résider dans l'analyse de la chaîne de caractères.

Retour en haut

Ecrire un cookie

Ecrire un cookie est quelque chose d'assez simple.
Dans un premier temps, on formate une chaîne de caractère de façon à ce qu'elle corresponde au format de stockage d'un cookie. Cette chaîne contient le nom du cookie, et sa valeur.

Une chaîne de caractère représentant un cookie ressemble à ceci :

Code : JavaScript

1	nomDuCookie=ValeurDuCookie;

Le point virgule sert de séparateur entre deux cookies.

Ensuite, dès que la chaîne est formatée, on l'ajoute dans l'objet cookie :

Code : JavaScript

1	document.cookie = sChaine;

Voici donc ce que peut donner le script complet, dans la fonction setCookie :

Code : JavaScript

function setCookie(sName, sValue) {
        var today = new Date(), expires = new Date();
        expires.setTime(today.getTime() + (365*24*60*60*1000));
        document.cookie = sName + "=" + encodeURIComponent(sValue) + ";expires=" + expires.toGMTString();
}

Il est important, quand on crée un cookie, de spécifier sa date d'expiration. Dans le code ci-dessus, le cookie est prévu pour durer un an. La date d'expiration (expires) est calculée en récupérant la date d'aujourd'hui (today), en lui ajoutant un an de millisecondes.

Pour que la date d'expiration soit reconnue par le navigateur, elle doit être écrite au format GMT, ce qui explique l'utilisation de la méthode toGMTString.

Cette petite fonction sert donc à ajouter un cookie nommé sName, et contenant sValue.

Retour en haut

Lire un cookie

Ici, c'est plus compliqué. Il va falloir analyser la chaîne de caractères contenue dans document.cookie. Ce qu'il faut, c'est récupérer l'emplacement du point virgule, et se débrouiller pour extraire la valeur du cookie cherché. Il est à noter que la date d'expiration ne figure pas dans la chaîne retournée par document.cookie.

Si il n'y a qu'un cookie enregistré, la chaîne est simple à parcourir, mais s'il y a plusieurs cookies, c'est plus compliqué.

Il y a deux manières de récupérer la valeur d'un cookie donnée : avec une analyse de chaîne simple, ou avec une expression régulière (regex).

Analyse normale

Code : JavaScript

function getCookie(sName) {
        var cookContent = document.cookie, cookEnd, i, j;
        var sName = sName + "=";
 
        for (i=0, c=cookContent.length; i<c; i++) {
                j = i + sName.length;
                if (cookContent.substring(i, j) == sName) {
                        cookEnd = cookContent.indexOf(";", j);
                        if (cookEnd == -1) {
                                cookEnd = cookContent.length;
                        }
                        return decodeURIComponent(cookContent.substring(j, cookEnd));
                }
        }       
        return null;
}

Si le code peut paraître un peu compliqué, il est en réalité assez simple. On parcourt la chaîne de caractères à la recherche de sName, et une fois qu'on l'a trouvé, on récupère la position du point-virgule (si il n'y est pas, c'est que c'est le dernier cookie de la chaîne), et on fait un substring final pour récupérer ce qui se trouve entre sName et la position du point-virgule.

Expression régulière

Code : JavaScript

function getCookie(sName) {
        var oRegex = new RegExp("(?:; )?" + sName + "=([^;]*);?");
 
        if (oRegex.test(document.cookie)) {
                return decodeURIComponent(RegExp["$1"]);
        } else {
                return null;
        }
}

Ici, on utilise une expression régulière pour trouver sName et récupérer sa valeur.

Voici une petite démonstration, avec un script pour écrire et lire des cookies.

Retour en haut

Infos complémentaires

Prise en charge des cookies

Il est possible que le navigateur du client n'accepte pas les cookies (mesure de sécurité). Pour savoir si le navigateur accepte les cookies, vous pouvez faire un test avec la propriété cookieEnabled de l'objet navigator qui revoie true ou false suivant que les cookies sont autorisés, comme ceci :

Code : JavaScript

if (navigator.cookieEnabled) {
        // Cookies acceptés
} else {
        alert("Activez vos cookies !");
}

Test du code

Mais cette méthode peut-être faillible sur certains navigateurs (pas de problèmes pour IE, FF, Opera...). Un autre test consiste tout simplement à créer un cookie et à le récupérer. Si le cookie ne peut être récupéré, les cookies sont désactivés.

Supprimer un cookie

On ne sait pas supprimer un cookie directement. Ce qu'il suffit de faire, c'est de le redéfinir en lui donnant une date d'expiration dépassée. Il sera ainsi supprimé par le navigateur.

Retour en haut