Exploiter les cookies par le code Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Gérer les cookies en Javascript

Les cookies sont des petites traces laissées sur l'ordinateur du client, enregistrées dans des fichiers, permettant à un code comme le Javascript, de récupérer des données stockées lors d'une nouvelle connexion de l'internaute. Souvent ces traces sont exploitées à des fins commerciales pour affiner les propositions en fonction des habitudes de navigation. Mais il s'agit aussi d'un moyen de récupérer des valeurs correspondant aux préférences de l'internaute, afin de restituer l'environnement tel qu'il l'avait calibré.



Lors de la formation précédente sur les traitements récursifs par les boucles Javascript, nous avions réussi à personnaliser l'environnement de l'internaute, selon son choix de couleur, tout en optimisant le code. Mais nous ne savions pas comment conserver ces paramètres afin de les restituer lors d'une nouvelle connexion. C'est ce que nous proposons d'améliorer ici grâce à la gestion des Cookies en Javascript. Nous en profiterons même pour greffer un bandeau, comme la législation du Web l'exige désormais (Cf. capture ci-dessus), afin d'avertir l'internaute que le site exploite les cookies. Au clic, son acceptation sera mémorisée sur une période donnée, afin de ne plus afficher le message à chaque navigation.

Les sources HTML et Javascript
Nous proposons de récupérer l'application de la formation précédente, telle que nous l'avions développée. Ainsi nous pourrons concentrer nos efforts sur la partie Javascript permettant d'exporter les données afin de laisser des traces sur l'ordinateur de l'internaute.

• Télécharger le fichier gerer-cookies.rar en cliquant sur son lien,
• Décompresser l'archive dans le dossier de votre choix,

Quelques fichiers HTML sont placés à la racine dont la page d'accueil de notre application. Il s'agit du fichier gerer-cookies.html. Les autres pages Web sont des rubriques liées par des liens en dur (a href), dans le code de cette page d'accueil. Comme pour la formation précédente, vous notez la présence de sous dossiers images et styles. Dans ce dernier se trouve la feuille de styles régissant les attributs de mise en forme et de mise en page des éléments Html. Mais il existe désormais un sous dossier supplémentaire, nommé js. Le fichier qui s'y trouve propose les fonctions Javascript permettant de créer un cookie ou d'en récupérer la valeur stockée.

Le Javascript est un langage libre. A ce titre, de très nombreux bouts de codes et sources sont proposées gratuitement sur le Web. Il n'y a qu'à se servir. Nous partons de ce principe ici avec les fonctions préconçues capables de gérer les cookies. Il ne restera plus qu'à les appeler avec les bons paramètres.

• A la racine, double cliquer sur le fichier gerer-cookies.html pour l'ouvrir dans un navigateur,
• Cliquer sur une petite icône de couleur de la barre d'outils située en haut à gauche,

Ce choix est appliqué globalement aux calques des rubriques de la page d'accueil, selon le code des boucles Javascript que nous avions créé lors de la précédente formation.

• Enfoncer la touche F5 du clavier pour rafraîchir la page,

La touche F5 permet de réinitialiser la page comme s'il s'agissait d'une nouvelle connexion de l'internaute. Et comme vous le constatez, les couleurs d'origine réapparaissent. Si nous proposons à l'utilisateur de personnaliser sa page d'accueil, nous devons mémoriser ses choix afin de les restituer lors de chacune de ses venues.

Le script des cookies
Comme nous l'avons dit plus haut, les fonctions permettant de créer et lire un cookie existent déjà, comme si nous avions récupéré la source depuis le Web.

• Dans le dossier de décompression, double cliquer sur le sous dossier js pour l'ouvrir,
• Puis, cliquer avec le bouton droit de la souris sur le fichier cookies.js,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Deux fonctions composent ce fichier de script dont l'extension est js, comme vous l'avez noté. Nous avons tout d'abord la fonction creerCookie qui, comme son nom l'indique, permet de créer un cookie pour laisser une trace sur l'ordinateur client. Cette fonction requiert trois paramètres qu'il faudra passer au moment de l'appel afin qu'elle fonctionne. Dans l'ordre, il y a d'abord le nom à attribuer au cookie, la valeur associée à stocker et sa durée de vie en nombre de jours.

Sa syntaxe complète est la suivante :

function creerCookie(nom, valeur, jours)
{
if (jours)
{
var date = new Date();
date.setTime(date.getTime() + (jours*24*60*60*1000));
var expires = ";
expires=" + date.toGMTString();
}
else var expires = "";

document.cookie = nom + "=" + valeur + expires + ";
path=/";
}

Puis nous avons la fonction recupererCookie qui ne requiert qu'un seul paramètre. Elle permet d'accéder aux informations de l'internaute stockées sur l'ordinateur, en fonction du nom du cookie qui avait été attribué, lors d'une précédente session par exemple. Bien que nous nous contenterons d'exploiter ces fonctions sans entrer dans le détail du code, notez les déclarations de variables, l'exploitation des instructions conditionnelles if ainsi que l'utilisation des boucles pour passer en revue les caractères d'une chaîne. Bref, il s'agit de l'ensemble des notions que nous avons apprises jusqu'alors et qui permettent déjà, de réaliser des traitements importants.

La fonction recupererCookie retourne la valeur stockée grâce à l'instruction return et le texte inconnu le cas échéant, signifiant qu'aucune trace n'a été trouvée :

function recupererCookie(nom)
{
var nomRC = nom + "=";
var ca = document.cookie.split(';');

for(var i=0;i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nomRC) == 0)
return c.substring(nomRC.length, c.length);
}
return "inconnu";
}

Le principe est donc le suivant : Si l'utilisateur clique sur une icône de couleur pour personnaliser la page d'accueil, nous devons faire appel à la fonction Javascript creerCookie pour mémoriser ce choix de couleur. Bien sûr, au chargement de la page, nous devons faire appel à la fonction Javascript recupererCookie afin de vérifier la présence éventuelle de traces stockées pour l'internaute. Si le cookie est présent, nous devons récupérer sa valeur afin de restituer la couleur de personnalisation choisie par l'internaute.

L'intérêt d'un code Javascript externe écrit dans un fichier de script indépendant, comme c'est le cas ici, est de centraliser les fonctions utiles pour n'importe quelle page du site. Le code est écrit une seule fois et non pour chaque page Html qui en a besoin. Néanmoins, chacune d'entre elles, pour exploiter ces fonctions, devra faire référence à ce fichier de code grâce une balise Javascipt déclarative. Idéalement, cette déclaration doit intervenir dans la section head de la page Html.

• Afficher la racine du dossier de décompression dans l'explorateur Windows,
• Cliquer avec le bouton droit de la souris sur le fichier gerer-cookies.html,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad++,
• Dans la section head du code Html, ajouter la référence au fichier de script, comme suit :

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>WebShop : Boutique en ligne</title>
<meta name="description" content="Un choix extraordinaire d'articles en vente sécurisée" />
<meta name="robots" content="index,follow" />
<meta http-equiv="content-language" content="fr" />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/cookies.js"></script>
</head>

Nous avons déjà commenté ces balises dans la formation précédente. Nous ne plaçons pas de code cette fois entre les bornes de la balise script. Nous exploitons en effet son attribut src pour désigner le fichier externe avec son chemin d'accès en relatif (src="js/cookies.js") par rapport au répertoire de l'application. Grâce à cette référence, les fonctions Javascript sont chargées en même temps que la page. En conséquence, elles peuvent être exploitées par simple appel de leur nom, sans oublier leurs paramètres quand elles en requièrent.

Créer et lire un Cookie en Javascript
Au clic de l'internaute sur l'une des icônes de couleur de la petite barre d'outils verticale, le code Javascript doit désormais créer un cookie enregistrant la valeur de cette couleur. L'objectif bien entendu sera de pouvoir récupérer cette valeur au chargement ou lors de la navigation, afin de restituer les préférences de l'internaute.
Dans la formation précédente, nous avions ajouté un gestionnaire d'événement à chacun de ces calques de couleur, dans le code Html.

<div class="carre_couleur" style="background-color:#c00000;" onClick="mef('#c00000')"></div>
<div class="carre_couleur" style="background-color:#9dc3e6;" onClick="mef('#9dc3e6')"></div>
<div class="carre_couleur" style="background-color:#a9d18e;" onClick="mef('#a9d18e')"></div>
<div class="carre_couleur" style="background-color:#f4b183;" onClick="mef('#f4b183')"></div>
<div class="carre_couleur" style="background-color:#bfbfbf;" onClick="mef('#bfbfbf')"></div>

Comme l'illustre l'extrait de code ci-dessus, au clic sur l'un des carreaux de couleur (onClick), la fonction Javascript mef est appelée avec en paramètre, la couleur correspondante. Nous avions écrit cette fonction en fin de code.

• Réaliser le raccourci clavier Ctrl + Fin pour atteindre rapidement le code de cette fonction,
• Dans les bornes de la fonction mef, après la boucle for, ajouter l'appel de la fonction creerCookie, comme suit : :

function mef(couleur)
{
var parent = document.getElementById('conteneur');
var enfants = parent.getElementsByTagName('div');

for (var i = 0; i < enfants.length; i++)
{
enfants[i].style.backgroundColor = couleur;
}

creerCookie("pref_couleur", couleur, "15");
}

La fonction est appelée avec en premier paramètre la valeur textuelle : pref_couleur. Il s'agira donc du nom du cookie. Nous exploiterons ce même nom pour retrouver la valeur stockée chez chaque internaute. En deuxième paramètre, nous passons la valeur de la couleur, elle-même transmise à la fonction mef lors de son appel (variable couleur), au clic sur l'un des calques de couleur. Enfin, le dernier paramètre indique la durée de vie du cookie ainsi créé, en nombre de jours. Nous choisissons arbitrairement de conserver une trace pendant 15 jours. Au-delà de ce délai, les préférences stockées seront supprimées.

• Enregistrer les modifications et ouvrir la page d'accueil (gerer-cookies.html) dans Firefox par exemple,
• Cliquer sur l'une des icônes de couleur afin de modifier l'apparence de la page,

Bien sûr à ce stade, si vous rouvrez la page dans le navigateur ou même que vous la rafraîchissez par la touche F5, les couleurs sont réinitialisées. Nous avons ajouté une instruction permettant de stocker cette valeur sur la machine de l'internaute. Nous n'avons pas encore codé les instructions permettant de récupérer cette valeur pour la recharger dans les contrôles Html.

Nous allons vérifier que ces traces ont bien été créées. Les cookies sont stockés à des emplacements bien précis qui varient selon le navigateur. Nous proposons le processus pour Firefox.

• Ouvrir une nouvelle fenêtre de l'explorateur Windows par le raccourci : touche Windows + E ,
• Accéder au sous-dossier Profiles en suivant le chemin d'accès ci-dessous,

C:\Users\nom-utilisateur\AppData\ Roaming\ Mozilla\ Firefox\ Profiles

Vous devez bien sûr remplacer la valeur nom-utilisateur par celle que vous avez attribuée au compte qui permet d'ouvrir une session sur votre machine. Si aucun fichier n'est présent dans ce dossier Profiles, vous devez ouvrir le sous dossier qui s'y trouve. Dans notre cas, il s'agit du dossier 24ifiskg.default.

• Cliquer alors avec le bouton droit de la souris sur le fichier cookies.sqlite,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,
• Réaliser alors le raccourci clavier CTRL + F pour afficher la boîte de dialogue de recherche,
• Puis, taper le texte pref_couleur, soit le nom que nous avons attribué au cookie,

Comme l'illustre la capture ci-dessus, au milieu des lignes souvent incompréhensibles, nous retrouvons notre cookie suivi de la valeur stockée, celle de la couleur passée en deuxième paramètre de la fonction. Comme nous savons que les préférences sont enregistrées, nous devons désormais écrire le code capable de les récupérer par lecture de la valeur du cookie.

• Fermer le fichier cookies.sqlite et revenir dans l'éditeur sur le code de la page gerer-cookies.html,
• Au début de la section du script, avant le code de la fonction mef, ajouter les instructions suivantes :

<script type="text/javascript" language="javascript">
var la_couleur="";

la_couleur = recupererCookie("pref_couleur");
alert(la_couleur);

if(la_couleur!="" && la_couleur!="inconnu")
mef(la_couleur);

Nous déclarons tout d'abord la variable la_couleur pour pouvoir y stocker la valeur récupérée à la lecture du cookie. Puis, nous l'affectons à la donnée retournée par la fonction recupererCookie à laquelle nous passons en paramètre le nom du cookie en question. La fonction alert permet ensuite de réaliser un petit test visuel temporaire. Après affectation, nous testons que la valeur stockée n'est ni vide ni le texte inconnu retourné lorsque la fonction échoue. Lorsque une donnée est effectivement retournée, nous appelons la fonction mef à laquelle nous passons la valeur ainsi récupérée, de manière à rétablir les préférences de couleur de l'internaute.

Ce code est écrit directement dans la section du script, en dehors de toute borne de fonction. En conséquence, étant donné que l'interprétation du code de la page par le navigateur est chronologique, il doit s'exécuter au chargement de cette dernière.

• Enregistrer les modifications et basculer sur le navigateur,
• Rafraîchir la page à l'aide de la touche F5 du clavier,

Les couleurs semblent se réinitialiser. Puis, surgit le test de la fonction alert prouvant que le cookie est bien lu et que sa valeur est extraite. Comme la fonction mef est ensuite appelée avec ce paramètre, lorsque vous cliquez sur le bouton Ok pour valider la boîte de dialogue, les préférences sont restaurées.

A ce stade, nous avons donc su enregistrer des données Web sur la machine de l'internaute. Puis nous avons réussi à y accéder en lecture afin de les récupérer pour les exploiter.

Bandeau de navigation
Il est temps de mettre en application ces acquis pour produire un bandeau désormais nécessaire à tout site internet, afin d'avertir les internautes de l'exploitation des cookies sur leur machine. Ce bandeau devra disparaître au clic de l'utilisateur, synonyme d'acceptation. Dans le cas contraire, il devra continuer d'afficher un message d'avertissement persistant. Nous choisissons arbitrairement de caler son calque en bas de page et de faire en sorte qu'il suive le défilement. Ce sont encore une fois les styles CSS qui vont régir ces attributs. Mais avant cela, nous devons créer le calque du bandeau dans le code Html de la page Web.

• Revenir dans l'éditeur de code de la page gerer-cookies.html,
• Passer l'instruction de la fonction alert en commentaire :

//alert(la_couleur);

• Avant la balise fermante body, ajouter le calque selon la syntaxe suivante :

<div class="cookie" id="bandeau">
<button class="bouton_cookie" type="button" id="Ok">Ok</button>
Ce site utilise les cookies pour am&eacute;liorer votre exp&eacute;rience navigation.
</div>

Nous créons un calque conteneur (div) auquel nous attribuons la classe cookie. Cette classe doit être créée dans la feuille de styles. Nous lui attribuons un identifiant (bandeau) pour pouvoir le masquer, avec les éléments qu'il contient, par le code Javascript. Dans ce calque, nous intégrons un bouton avec un message. Ce bouton est lui aussi associé à une classe à créer dans la feuille de styles. Sa mission sera notamment de le placer sur la droite du bandeau, pour ne pas se superposer au texte.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,
• Faire défiler la page tout en bas à l'aide de l'ascenseur,

Le calque parent et le bouton font appel à des styles de mise en forme qui n'existent pas. C'est la raison pour laquelle ils apparaissent dans le flux de la page, chronologiquement et destructurés car dénués de tout attribut.

• Dans le dossier de décompression, double cliquer sur le sous dossier styles pour l'ouvrir,
• Puis, cliquer avec le bouton droit de la souris sur le fichier mef.css,
• Dans le menu contextuel qui apparaît, choisir de l'ouvrir avec un éditeur comme le Notepad++,
• Idéalement au-dessus du style carre_couleur, créer les styles cookie et bouton_cookie, comme suit :

.cookie
{
position:fixed;
z-index:130;
right:0;
bottom:0px;
left:0px;
height:20px;
padding:5px;
background-color:#b456ff;
overflow:hidden;
background:rgba(43,43,43,.7);
color:#fff;
text-align:left;
font-family:Calibri;
font-size:13px;
visibility:visible;
}

.bouton_cookie
{
background-color:#95b91e;
color:#ffffff;
float:right;
height:20px;
width:50px;
font-family:Calibri;
font-size:13px;
}

Nous nous contentons ici de recopier des attributs que nous avons testés et pour lesquels nous allons donner quelques explications. Le style cookie est appliqué au calque conteneur. Son attribut position réglé à fixed lui permet de suivre le défilement de la page, si défilement il y a. Son attribut z-index réglé sur une grande valeur lui confère un placement au premier-plan. Comme sa propriété bottom est réglée à 0px, le calque se positionne tout en bas de la page. Pour le reste, il s'agit de réglages classiques de couleurs et de police. Le style bouton_cookie quant à lui est appliqué au bouton contenu dans le calque. On note le réglage de l'attribut float sur right afin de le positionner sur la droite, en fonction de la largeur disponible, pour ne pas chevaucher le texte.

• Enregistrer les modifications et basculer sur le navigateur,
• Rafraîchir la page par le raccourci CTRL + F5,

Ce raccourci clavier permet de vider le cache du navigateur et en ce sens de le forcer à réinitialiser toutes les liaisons externes. Ces ressources externes sont le fichier de script et la feuille de styles. Sans lui, malgré les modifications apportées au fichier CSS, il se peut que la page se recharge avec les anciens attributs de style conservés en mémoire, dans le cache.



Le bandeau correctement mis en forme apparaît désormais placé en bas de la page d'accueil. A ce stade bien sûr, le clic sur le bouton Ok ne produit encore aucun résultat puisque nous ne lui avons associé aucun code Javascript.

Deux actions doivent être réalisées sur le clic. Le calque et son contenu doivent disparaître et un cookie attestant que l'internaute a validé les conditions, doit être créé. Ce cookie pourra être rechargé lors de la navigation ou d'une prochaine session afin d'en restituer la valeur, pour masquer automatiquement le bandeau et ne plus importuner l'internaute. La formation sur les événements Javascript nous avait appris à déclencher un code au clic sur l'élément Html. Ce dernier est relativement simple. Nous choisissons donc de l'encapsuler dans la balise du bouton plutôt que de créer une fonction Javascript indépendante.

• Basculer dans l'éditeur de code de la page Html,
• Dans la balise du bouton, ajouter l'attribut onClick suivant :

<div class="cookie" id="bandeau">
<button class="bouton_cookie" type="button" id="Ok" onClick = "Javascript:document.getElementById('bandeau').style.visibility = 'hidden'; creerCookie('valeursCookies', 'oui', '15');">Ok</button>
Ce site utilise les cookies pour am&eacute;liorer votre exp&eacute;rience navigation.
</div>

L'attribut onClick permet de déclencher le gestionnaire d'événements précisément sur la zone d'influence du bouton. Lorsqu'un clic est intercepté, un code Javascript (Javascript:) est déclenché. Il consiste dans un premier temps à masquer le bandeau matérialisé par le calque conteneur. Nous exploitons une fois de plus la méthode getElementById de l'objet document afin de désigner le calque par son identifiant (bandeau). Comme nous en avons l'habitude, nous réglons ensuite sa propriété visibility sur hidden pour le masquer.

Puis, nous appelons la fonction creerCookie à laquelle nous passons les trois paramètres nécessaires. Il y a en premier lieu, le nom arbitraire que nous attribuons à ce cookie (valeursCookies) dans lequel nous inscrivons le texte oui pour une durée de 15 jours.

• Enregistrer les modifications et basculer sur le navigateur,
• Rafraîchir la page par la touche F5,
• Cliquer sur le bouton Ok du bandeau,

L'événement est parfaitement géré puisqu'en effet le calque et con contenu disparaissent. En revanche, si vous enfoncez de nouveau la touche F5 du clavier, le bandeau réapparaît.

Nous devons désormais tester la présence du cookie au chargement pour en extraire la valeur. S'il existe, nous saurons que l'internaute a validé récemment. En conséquence, il s'agit de ne pas afficher le bandeau.

• Basculer dans l'éditeur de la page Html,
• Au début de la section du script, juste après la déclaration de variable, ajouter le code suivant :

if(recupererCookie("valeursCookies") == "oui")
document.getElementById("bandeau").style.visibility = "hidden";
else
document.getElementById("bandeau").style.visibility = "visible";

Il s'agit d'un test classique grâce à l'instruction conditionnelle If en Javascript d'autant que nous exploitons des fonctions toutes faites. Si la lecture du cookie retourne la valeur oui, nous masquons le calque du bandeau au chargement de la page. Dans le cas contraire, si la valeur récupérée est différente ou tout simplement que le cookie n'existe pas ou plus, nous le conservons affiché. Si vous rafraîchissez de nouveau la page Html dans le navigateur, vous constatez que le bandeau n'est plus visible, puisqu'en cliquant sur le bouton, nous avions généré la création du cookie.

Ces cookies peuvent être exploités pour beaucoup de raisons, notamment mieux cibler les préférences de consommation de chaque internaute. Leur intérêt est double puisqu'ils permettent d'étudier le comportement des utilisateurs sans les connaître, car non-inscrits en base de données. On évite aussi d'alourdir les informations côté serveur en les archivant dans la base. Ces traces peuvent être répliquées à des millions d'exemplaires, partout dans le monde. Vous portez avec vous une sorte de fiche signalétique vous décrivant.

Le code complet de notre application Javascript gérant les cookies est le suivant :

...
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/cookies.js"></script>
</head>

...
<div class="cookie" id="bandeau">
<button class="bouton_cookie" type="button" id="Ok" onClick = "Javascript:document.getElementById('bandeau').style.visibility = 'hidden'; creerCookie('valeursCookies', 'oui', '15');">Ok</button>
Ce site utilise les cookies pour am&eacute;liorer votre exp&eacute;rience navigation.
</div>
</body>

...
<script type="text/javascript" language="javascript">
var la_couleur="";

if(recupererCookie("valeursCookies") == "oui")
document.getElementById("bandeau").style.visibility = "hidden";
else
document.getElementById("bandeau").style.visibility = "visible";

la_couleur = recupererCookie("pref_couleur");
//alert(la_couleur);

if(la_couleur!="" && la_couleur!="inconnu")
mef(la_couleur);

function mef(couleur)
{
var parent = document.getElementById('conteneur');
var enfants = parent.getElementsByTagName('div');

for (var i = 0; i < enfants.length; i++)
{
enfants[i].style.backgroundColor=couleur;
}

creerCookie("pref_couleur", couleur, "15");
}
</script>