COURS JavaScript



Accueil | Boîte à outils : Les Cookies, Passer un nom d'une page à l'autre (suite)

Les Cookies, passer un nom d'une page à l'autre (suite)


Généralités

Si vous êtes passés par la page qui enregistre votre nom et que vous ayez bien fait tout ce qui vous était demandé, celui-ci est sur votre disque dur et vous pouvez le vérifier en allant regarder dans le fichier des cookies sur votre disque dur ou en cliquant ici pour Lire le cookie. Si vous n'avez rien dans la fenêtre modale de vérification, il faut que vous alliez faire ce qui est demandé en cliquant sur ce lien puis revenir ici avant toute chose.

C'est fait ? Le cookie apparaît dans la fenêtre de vérification ? Alors on continue. Il va nous falloir maintenant récupérer le cookie et exploiter son contenu pour personnaliser les pages de l'internaute.


Récupération du cookie.

Nous savons comment faire. Nous sommes dans une nouvelle page, différente de celle qui a servi à demander son nom à l'internaute. Ce nom est stocké dans le cookie "MonCookie". Nous savons aussi le faire par l'instruction :

LesCookies = document.cookie ;

Supposons que j'ai saisi mon nom à moi, le mien, dans la page précédente. La variable LesCookies contiendrait la chaîne de caractères suivante :

"MonCookie=Philippe Médan"

Il va falloir maintenant extraire la sous chaîne "Philippe Médan" de la chaîne totale "MonCookie=Philippe Médan" Grâce aux leçons sur le travail sur les chaînes de caractères, nous savons comment repérer l'emplacement d'un caractère. Il nous faut l'emplacement du signe "=" (égal) qui marque le début de la partie intéressante pour nous. Nous allons stocker ce début dans une variable que nous appellerons tout simplement Debut. Après avoir pris soin de déclarer la variable Debut par l'instruction

var Debut ; // index du signe égal

Nous écrirons donc :

Debut = LesCookies.indexOf("=") ; // position du signe =

Ce qui nous donnera dans le cas présent "9" en se souvenant que tout commence à zéro. Pour votre cas personnel, vous pouvez cliquer pour voir la position du signe" =" .

Nous devons aussi regarder quelle est la longueur du cookie. Notre cookie est déjà dans une variable. C'est une chaîne de caractères. Nous connaissons déjà la propriété .length qui donne la longueur d'une chaîne de caractères. Nous pouvons donc relever la longueur de la chaîne LesCookies en la mettant dans une autre variable, par exemple LongueurCookie en écrivant :

var LongueurCookie ; // pour la longueur du cookie
LongueurCookie = LesCookies.length ; // longueur du cookie.

Bien sûr, comme il y a parfois plusieurs cookies pour mon nom de domaine et que l'on sait qu'ils sont séparés par des ";" (point virgule), nous devrons rechercher la position du premier ";" pour extraire le nom du client. En supposant bien entendu que le client n'ait pas inséré de ";" dans sa saisie. Ca vous arrivera aussi si vous utilisez des compteurs de fréquentation. L'instruction est la même que précédemment et on écrira :

var Fin;
Fin = LesCookies.indexOf(";") ; // position du signe ";"

Cependant, il n'est pas obligatoire qu'il y ait plusieurs cookies pour le même nom de domaine. Par exemple si vous avez téléchargé tout le site au format .zip et que vous l'utilisiez en local. Le cookie du compteur de fréquentation ne s'écrira pas. Nous devons donc faire attention. La fin de notre cookie n'est pas forcément marqué par le signe ";". Si notre cookie est unique, la fin du cookie serait simplement la longueur de celui-ci. Si nous cherchons la position d'un point virgule qui n'existe pas, l'instruction :

Fin = LesCookies.indexOf(";") ; // position du signe ;

renverrait -1 (moins 1) ce qui ne conviendrait absolument pas pour la suite de notre programme. Vous comprenez maintenant pourquoi je vous ai demandé d'éviter d'utiliser le signe ";" dans la saisie de votre nom à la page précédente. De même si vous créez vous même un cookie, évitez d'y inclure des ";", ce qui fausserait tout. Nous allons donc tester si le signe ";" (point virgule) existe ou non. Nous savons le faire puisque nous avons appris à faire des tests. Nous écrirons donc :

if (Fin == -1) { // debut du test
Fin = LongueurCookie ; // la fin est la longueur du cookie, le signe ";" n'existe pas
} // fin du test

Il ne nous reste plus maintenant qu'à extraire la partie intéressante, c'est à dire le nom du client. Nous avons déjà appris à le faire dans la leçon sur le traitement des chaînes de caractères. C'est la méthode .substring(position1, position2). Mais attention !!! On se souvient que le premier caractère d'une chaîne commence à l'index "0" (zéro). Il faudra donc rajouter plus 1 à l'index de début pour ne pas avoir le signe "=" compris dans le nom du client. Nous pourrons alors extraire ce fameux nom par l'instruction :

VotreNom = LesCookies.substring(Debut + 1 , Fin);

Vous verrez le résultat en cliquant sur voir le nom. Si vous avez bien saisi votre nom sur la page précédente de cette leçon, vous pourrez le voir. Vous pouvez aussi voir le contenu du cookie avec le champ d'exploitation qui se trouve tout en bas de cette page pour vérifier et bien comprendre le mécanisme.

Maintenant que le nom du client est isolé dans la variable VotreNom, nous n'avons plus qu'à l'exploiter pour personnaliser la page. Si tout a bien été fait, vous devriez voir cette personnalisation à votre nom (celui que vous avez bien voulu saisir) sur la ligne ci-dessous.

Si ça n'était pas le cas, allez saisir un nom valide dans la leçon précédente et suivez bien les instructions. Pour insérer ce nom dans la page, il suffit d'insérer le code suivant à l'endroit exact (dans le code HTML) où vous voulez personnaliser la page :

<Script language="javascript">
LesCookies = document.cookie; // lit le cookie
Debut = LesCookies.indexOf("="); // relève la position du caractère "="
LongueurCookie = LesCookies.length ; // longueur du cookie.
Fin = LesCookies.indexOf(";"); // relève la position du caractère ";"
if (Fin == -1) { // debut du test
Fin = LongueurCookie ; // la fin est la longueur du cookie, car le signe ";" n'existe pas
} // fin du test
VotreNom = LesCookies.substring(Debut + 1, Fin);// extrait le nom
document.write("<b>Bienvenue " + VotreNom + "</b>");// affiche le nom dans la page
</script>

Bien entendu, toutes les variables auront dû être déclarées en global comme nous en avons maintenant l'habitude. Ce code étant en dehors de toute fonction, il est en exécution immédiate et s'active au chargement de la page HTML elle même.

Vous pourrez vérifier que c'est bien écrit à l'aide du lien sous le champ ci-dessous, comme d'habitude.

Vous pouvez : Lire le cookie

Suite de la leçon.



Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.