|
33.2 Cookies |
  copyleftSee You Why? |
La technique de cookies est la seule qui soit accessible en JS pur, visant à écrire et lire ce qui a été écrit en JS pur. Même s'il est possible de rediriger l'écriture des cookies, chaque ordinateur, selon son OS et le navigateur employé, a une place privilégiée (et cachée, si vous n'avez pas d'outils spéciaux) pour stocker les cookies.
Pour voir où Internet Explorer stocke ses cookies dans Windows Vista, Windows 7 ou Windows 8, vous devez ouvrir
l'Explorateur> Organiser> Options des dossiers> Vues>
Vérifier "Ne pas afficher les fichiers et dossiers cachés" et décocher "Masquer les fichiers protégés OS '>
Appliquer> OK .
Maintenant, vous serez en mesure de voir les deux lieux réels de Windows dossiers de cookies à l'adresse suivante.
C: \ Users \ nom d'utilisateur \ AppData \ Roaming \ Microsoft \ Windows \ Cookies
C: \ Users \ nom d'utilisateur \ AppData \ Roaming \ Microsoft \ Windows \ Cookies \ Low
Dans Google Chrome sous Windows 7, ils peuvent se placer dans
C:\Users\ nom d'utilisateur \AppData\Local\Google\Chrome\User Data\Default\Local Storage
De la même façon que pour le JS, chaque internaute est libre des options pour les cookies à recevoir. Pour modifier correctement les paramètres de JavaScript et ceux relatifs aux cookies, nous invitons le lecteur à lire cette page http://demo.opencrx.org/opencrx-core-CRX/helpJsCookie_fr_FR.html.
Finies les craintes injustifiées vis-à-vis de ces outils qui ne servent pas à stocker des milliers d'informations privées vous concernant
Avant de développer la moindre information, il nous parait opportun de :
a) découvrir à quoi servent ou peuvent servir les cookies ;
b) découvrir quelles informations et comment les stocker dans un ou plusieurs cookie(s) ;
c) comme il ne suffit pas de stocker des infos, comment récupérer des infos stockées ;
d)
Un cookie permet de sauvegarder sur l'ordinateur du visiteur des informations qui peuvent être consultées lors de la visite suivante. Comment ? Rien d'autre qu'un petit fichier texte enregistré par le navigateur.
Ce fichier permet de nuancer votre visite sur un site : s'agit-il de la 1re ou de la 20e fois que vous visitez le site ; quels sont vos nom et prénom donnés il y a 20 minutes lors de votre arrivée sur le site ; quelle est votre dernière page lue d'un tutoriel, etc. Un cookie a une date d'expiration, au-delà de cette date, le cookie ne sera plus valide...
Ainsi, chaque fois que vous visitez la page (ou le site) d'où vient le cookie, les informations vous concernant sont disponibles. C'est parfois bien pratique, mais cela peut aussi nuire à votre vie privée. Heureusement, la plupart des navigateurs vous permettent de gérer les cookies (vous pouvez donc supprimer ceux provenant des sites publicitaires, par exemple).
Les cookies peuvent aussi être lus par JavaScript. Ils sont principalement destinés à conserver vos préférences ou à retenir des informations de page en page (bien pratique de retenir votre panier d'achat lors de visites sur des sites commerciaux).
Un cookie est forcément écrit par un site hébergeur (sa signature est d'ailleurs dans la signature du cookie). Il ne sera lu que par ce même site en cas de nouvelle visite. Il comporte généralement 4 paramètres qui ne sont pas tous obligatoires, mais qui, le cas échéant, ont une valeur par défaut :
JavaScript ou PhP pour programmer les cookies ? JS possède un grand avantage, c'est que l'on peut concevoir, composer ou enregistrer un cookie à n'importe quel moment, alors que le PhP qui est exécuté du côté serveur avant l'envoi chez le client-visiteur rend cette interactivité plus difficile... PhP compose votre page avant que vous ne la voyiez sur votre ordinateur.
À contrario, JS a aussi un gros inconvénient que n'a pas le PhP, c'est que le visiteur peut désactiver le JS (et alors accepter de ne plus jouir des avantages offerts par JS) sur son ordinateur.
Outre ces paramètres, un cookie a un nom et une valeur associée qui lui est transmise. On pourrait avoir : prenom=Patrick ou encore dern_visite=21/12/2012 (vous aurez compris pourquoi cette date, mais je ne suis pas maya ;o) ). Bref, l'essentiel est de pouvoir lire et écrire un cookie sans trop s'occuper des paramètres attribués par défaut. La logique pédagogique devrait nous inciter à apprendre à lire, avant de pouvoir écrire... cependant, nous ferons le contraire et justifierons notre choix.
La seule chose à retenir, c'est que JS emploie l'objet document et sa proprité cookie. Non, ne nous quittez pas ici, il nous faudra encore donner quelques précisions...
Cette propriété document.cookie de l'objet document contient la liste des cookies, comme un tableau (dans le sens 'array' du terme). Cela justifie d'ailleurs pourquoi on apprendra à écrire un cookie, avant d'en lire une collection, en choisir un qui convient, etc.
Un cookie peut être non persistant (sans date) ou persistant (ne disparaitra qu'après une date fixée). Sans date, il vivra ce que vivent les roses, pardon, le temps de votre session sur le site visité. Nous présenterons ces deux variantes ci-après, mais en attribuant un mois de survie si aucune durée n'a été précisée.
Comme pour les fonctions où l'on a fait la distinction entre l'appel de la fonction et la définition de la fonction, on distinguera ici aussi la définition des fonctions d'écriture ou de lecture des cookies et l'appel à ces fonctions ou méthodes.
Nous supposerons ici que nous souhaitons envoyer un seul couple de valeurs, son nom et la valeur à lui attribuer (son contenu) ; on écrira :
<script type="text/javascript">
function cree_cookie(nom, contenu) {
var gateau = nom+"="+contenu;
document.cookie = gateau;
}
</script>
Le lecteur aura deviné que si un appel de cette fonction est fait par l'instruction cree_cookie(prenom,Patrick) un cookie sera créé et son contenu sera prenom=Patrick... c'est l'utilité de la variable que nous avons appelée 'gateau' (devinez pourquoi ;o) ).
Rien ne nous empêcherait de créer un autre cookie par l'instruction cree_cookie(passage,1) qui pourrait indiquer que Patrick en est à son premier passage sur le site ou plus généralement cree_cookie(deja_venu,oui) qui pourrait aussi indiquer que Patrick est déjà passé sur le site, sans préciser le nombre de fois.
Une seule fonction créée mais deux (ou trois) appels qui ont généré deux (ou trois) cookies qui cesseront d'exister dès que l'internaute visiteur quittera son navigateur (Internet Explorer, Google Chrome ou autre Mozilla).
Le lecteur aura compris qu'en général, un webmaster souhaite retrouver les informations stockées lors de la prochaine visite de l'internaute.
Il suffira alors de lui ajouter un paramètre d'expiration, qui en principe doit être exprimé en millisecondes... et pour cela, mieux vaut bien connaître les méthodes et propriétés de l'objet Date, ce qui sera développé dans un prochain chapitre (voir ici).
Certains tutoriels vont jusqu'à proposer "il faut préciser sa date d'expiration, obtenue en ajoutant au moment présent la durée de vie voulue (en millisecondes)."
Ce qui voudrait dire :
il faut relever la date (et heure, minutes, secondes) de l'instant présent ;
ensuite calculer le nombre de millisecondes depuis le 1er janvier 1970 ;
puis y ajouter le nombre de millisecondes qui correspond à l'argument 'dur_limit' que nous supposons être exprimé en jours (donc à multiplier par 1000*60*60*24) ;
ensuite convertir cette somme en une date ;
il faut ensuite convertir cette date en une chaîne de caractères au format GMT (méthode toGMTString() ) et enfin
l'affecter au paramètre "expires=" du cookie", argument précédé d'un point-virgule.
C'est oublier que JS a sa propre façon de gérer l'objet Date développé en notre chapitre 35. On y sera bientôt. Observons plutôt cette nouvelle définition de la fonction :
<script type="text/javascript">
function cree_cookie(nom, contenu, dur_limit) {
var gateau = nom+"="+contenu;
dansunmois=new Date;
dansunmois.setMonth(date.getMonth()+1); // expire dans un mois
if (dur_limit) {
aujourdhui = new Date.getTime();
apres = new Date(aujourdhui + 1000*60*60*24*dur_limit);
futur = apres.toGMTString();
document.cookie = gateau +"; expires=" + futur;
} else {
document.cookie = gateau +"; expires=" + dansunmois;
} }
</script>
Cette définition implique qu'aucun cookie de votre site ne sera plus "non persistant", puisque vous lui attribuez une durrée de vie de un mois si aucune autre durée n'a été invoquée.
Encore faudra-t-il fixer l'unité de temps du paramètre de durée de vie de notre paramètre dur_limit. Nous supposerons qu'il s'agira de jours, donc il faudra multiplier cette valeur par 1000*60*60*24 pour la convertir en millisecondes, si besoin est.
Le cookie créé par l'instruction cree_cookie(passage,1) qui comptait le nombre de passages sur le site n'a aucun intérêt s'il n'est pas enregistré sur le disque dur de l'internaute visiteur pour une durée suffisamment longue pour pouvoir être récupéré dans l'année qui suit.
On créera donc un cookie par l'instruction cree_cookie(passage,1, 365).
<script type="text/javascript">
function cree_cookie(nom, contenu, dur_limit) {
var gateau = nom+"="+contenu;
dansunmois=new Date;
dansunmois.setMonth(date.getMonth()+1); // expire dans un mois
if (dur_limit) {
aujourdhui = new Date.getTime();
apres = new Date(aujourdhui + 1000*60*60*24*dur_limit);
futur = apres.toGMTString();
document.cookie = gateau +"; expires=" + futur;
} else {
document.cookie = gateau +"; expires=" + dansunmois;
} }
</script>
Si votre lecture vous amène ici, c'est que l'écriture d'un ou plusieurs cookie(s) ne pose plus de problème pour vous.
Écrire un cookie, c'est créer une paire "nom, contenu" qui s'accumule en mémoire. Lire un cookie, c'est retrouver une paire "nom, contenu" parmi les paires en mémoire ou sur votre disque dur (plus précisément sur le disque dur de votre internaute-visiteur de vos pages).
Le lecteur aura compris que le problème sera de choisir le bon cookie dans la foultitude de cookies envoyés par le site dans certains cas.
Généralement, un webmaster qui a créé des cookies en connait leur nom et leur utilité. La manière la plus simple est de rechercher la valeur contenue dans l'objet et sa propriété document.cookie, qui connait tous les cookies propres au site visité qui sont séparés de points-virgules.
Contrairement à la fonction qui nous a permis de créer un cookie, (cree_cookie) pour la lecture, il n'est ni besoin de connaitre la longévité du cookie, ni le contenu qui est l'élément que l'on recherche. Allons-y pour la création d'une fonction (lit_cookie) qui puisse lire le contenu d'un cookie dont on connait le nom :
<script type="text/javascript">
function lit_cookie(nom) {
var nom_eg = nom+"=";
var cook_arr = document.cookie.split(';');
for (var i=0;i<cook_arr.length;i++) {
var celui_ci = cook_arr[i];
while (celui_ci.charAt(0) = ' ') {
//pour supprimer les blancs ou espaces qui précèdent
celui_ci = substring(1,celui_ci.length);
}
if (celui_ci.indexOf(nom_eg) == 0) {
return celui_ci.substring(nom_eg.length,celui_ci.length);
}
}
return null;
}
Je vous avais bien dit qu'il valait mieux apprendre à écrire avant d'apprendre à lire... les cookies !
Quelques explications s'imposent :
nom du cookie recherché ;nom_eg ;document.cookie se comporte comme une array dont les éléments sont séparés par des ';'... éclatons donc ces valeurs en un tableau cook_arr (voir manipulation de chaines et/ou tableaux ;for i, parcourons chaque élément du tableau et rebaptisons chaque élément en celui_ci ;while ;nom_eg) ;celui_ci ;return indique la fin du bouclage ;null'.Vous en voulez une variante ? Pourquoi pas ? Tant que l'on programme (ou apprend à programmer), on s'amuse :
<script type="text/javascript">
function lit_cookie(nom) {
var renvoi = undefined;
var cook_arr = document.cookie.split(';');
for (var i=0;i<cook_arr.length;i++) {
var celui_ci = cook_arr[i];
var eclat = celui_ci.split('=');
if (eclat[0] == nom) {
renvoi = eclat[1];
}
}
return renvoi;
}
Plus facile en apparence, mais ne gère pas la possibilité d'espaces présents dans le contenu de la variable document.cookie. Sinon, le raisonnement est le même.
Si le but est de pouvoir écrire et lire des cookies, il serait intéressant de voir comment gérer l'information sauvegardée sur le HD du visiteur de vos pages.
Nous imaginerons donc la lecture de ce cookie à chaque arrivée d'un visiteur sur notre page, script qui lira la valeur de la valeur nommée 'passage' et qui l'incrémentera et sauvegardera l'info pendant un an. On peut,
dans un premier temps, imaginer un appel d'une fonction compter_visites dès l'ouverture de la page, cela implique un body avec l'argument <body onLoad="compter_visites();">
dans un deuxième temps, construire cette fonction :
<script type="text/javascript">
function compter_visites() {
var nbr_visit = lit_cookie("passage"); var message="";
if (! nbr_visit) {
nbr_visit=1;
cree_cookie("passage",1,365);
message = "C'est votre première visite sur cette page !";
} else {
nbr_visit++;
var cadeau = 1 + Math.ceil(nbr_visit/4);
message = "Vous parcourez cette page pour la "+nbr_visit+
"e fois !\nVous avez gagné "+cadeau+" cookies ;o)";
cree_cookie("passage",nbr_visit,365);
}
alert (message);
}
Attention, le lecteur aura parfaitement deviné que les fonctions lit_cookie et cree_cookie expliquées ci-dessus doivent être connues dès l'ouverture de la page... à placer dans <head> donc...
voir suite >>>
voir suite >>>
voir suite >>>
voir suite >>>