Les cookies en JavaScript

Sommaire du document

Les cookies, que nous devons à Netscape, nous permettent de stocker des informations sur la machine du visiteur. Ces informations permettent le réglage de nombreuses options de personnalisation du site, en fonction des choix du visiteur, afin de lui éviter de régler ces options à chaque visite, ou pire, à chaque page.

Le cookie ne peut contenir que ce que l'utilisateur a bien voulu donner comme information, il ne pourra jamais récupérer les informations à l'insu du visiteur.

Quelques exemples d'utilisations de cookies :

  • Choix de la langue.
  • Personnalisation des effets graphiques du site.
  • Variables à transmettre d'une page à l'autre.
  • Mot de passe pour un accès à une partie réservée du site.

Le langage JavaScript nous permet de manipuler ces cookies... Le type d'informations à stocker n'a aucune influence sur le code. Un cookie est donc un simple fichier de texte qui contient une chaîne de caractères reprenant les informations concaténées.

 

Que contiennent les cookies ?

Nous pouvons regarder la fonction setCookie (qui permet de créer un cookie) pour avoir une idée des différentes parties d'un cookie.

  1. function setCookie(name, value) {
  2. var argv=setCookie.arguments;
  3. var argc=setCookie.arguments.length;
  4. var expires=(argc > 2) ? argv[2] : null;
  5. var path=(argc > 3) ? argv[3] : null;
  6. var domain=(argc > 4) ? argv[4] : null;
  7. var secure=(argc > 5) ? argv[5] : false;
  8. document.cookie=name+"="+escape(value)+
  9. ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
  10. ((path==null) ? "" : ("; path="+path))+
  11. ((domain==null) ? "" : ("; domain="+domain))+
  12. ((secure==true) ? "; secure" : "");
  13. }

 

Nom du cookie

Un cookie doit posséder un nom. Ce nom est obligatoire car il est la clé qui permet d'accéder à une valeur alphanumérique. Normalement les noms sont insensibles à la casse[1].

Le nom ne peut contenir certains caractères (comme le point-virgule, la virgule, l'espace). Si nous désirons utiliser ces caractères (ce qui ne me semble d'aucune utilité) nous devons utiliser l'encodage des URL par l'appel à la fonction JavaScript escape.

Partie du code :

  1. document.cookie=name+"="+value;

 

Expiration du cookie

Nous pouvons spécifier une date de validité du cookie avec l'attribut expires. Après cette date, le cookie est détruit. Si nous ne spécifions aucune date, le cookie n'existera plus quand la session de l'utilisateur sera terminée (par exemple quand le navigateur sera fermé).

La valeur est une date sous le format Wdy, DD-Mon-YYYY HH:MM:SS GMT avec 

  • Wdy pour le « jour de la semaine » (en anglais, “week day”) sur trois caractères.
  • DD pour le « jour du mois » (en anglais, “day”) sur deux caractères.
  • Mon pour le « mois » (en anglais, “month”) sur trois caractères.
  • YYYY pour l'« année » (en anglais, “year”) sur quatre caractères.
  • HH pour l'« heure » (en anglais, “hour”) sur deux caractères en format de 0 à 24.
  • MM pour les minutes sur deux caractères.
  • SS pour les secondes sur deux caractères.
  • GMT pour le « temps moyen de Greenwich » (en anglais, “Greenwich Mean Time”).

Partie du code :

  1. "; expires="+expires.toGMTString()

Exemple de code :

  1. document.cookie="email=bodin.jean@gmail.com; expires=Wed, 28-Jun-2017 17:24:46 GMT";

Nous pouvons aussi calculer une durée en JavaScript :

  1. var date_exp = new Date();
  2. //durée de vie de 365 jours
  3. date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
  4. document.cookie="user=Ada Lovelace; expires="+date_exp.toGMTString();

 

Domaine du cookie

Nous ne spécifierons pratiquement jamais le domaine du cookie. Si il n'est pas renseigné, le nom du serveur sera automatiquement utilisé.

 

Chemin du cookie

Nous pouvons définir la portée du cookie avac l'attribut path, pour spécifier que le cookie ne s'applique que pour un sous-répertoire ou un fichier.

 

Type de connexion du cookie

L'attribut secure nous permet de déterminer le type de connexion : normale ou chiffrée. Si l'option secure est activée, le navigateur ne pourra utiliser le cookie que si la connexion est en SSL ou S-HTTP.

 

Version du cookie

La spécification prévoit un numéro de version pour les cookies, mais cette information est rarement présente.

Le numéro de version peut avoir une grande importance dans le cas oû nous avons défini une date d'expiration qui n'est pas encore atteinte et que nous désirons invalider ou modifier certaines valeurs. Si le numéro de version n'est pas présent, la seule manière de procéder est d'attribuer un nouveau nom au cookie (mais dans ce cas, l'ancien cookie sera toujours présent, ce qui peut poser problème car il existe une limite au nombre de cookies qu'un navigateur accepte par site).

 

Limitations des cookies

Selon la spécification, les navigateurs devraient être capables de supporter au moins 300 cookies, un poids minimum de 4Ko par cookie, et un total minimum de 20 cookies par site ou domaine.

 

Les cookies de ce site

Voici quelques cookies générés par ce site :

  • Nom : brSearch
    • Valeur : cookie non présent
    • Description : La partie Recherche du menu est étendue (1) ou pas (0). Valeur par défaut : 0
  • Nom : brMbr
    • Valeur : cookie non présent
    • Description : La partie Utilisateur du menu est étendue (0) ou pas (1). Valeur par défaut : 0
  • Nom : brNav
    • Valeur : cookie non présent
    • Description : La partie Navigation du menu est étendue (0) ou pas (1). Valeur par défaut : 0
  • Nom : brSkin
    • Valeur : cookie non présent
    • Description : La partie Apparence du menu est étendue (1) ou pas (0). Valeur par défaut : 0
  • Nom : brStat
    • Valeur : cookie non présent
    • Description : La partie Stats du menu est étendue (1) ou pas (0). Valeur par défaut : 0
  • Nom : skin
    • Valeur : cookie non présent
    • Description : L'apparence du site (le style sélectionné par le visiteur).
      • 0 (sans style)  : Page sans feuille de style
      • l (Sans couleurs)  : Simple feuille de style de mise en page.
      • b (Gris-blanc)  : Style minimum, peu de couleurs.
      • 1 (Gris-Bleu-Orange)  : Dominante de gris, titres en orange, fond de page gris-bleu, fond de texte gris clair.
  • Nom : showFB
    • Valeur : cookie non présent
    • Description : Afficher ou pas les interractions avec FaceBook.

Pour les cookies du menu (ceux dont le nom débute par br...), la valeur 1 signifie que la valeur est opposée à la valeur par défaut.

 

Comment utiliser les cookies ?

Les fonctions

  1. var glob_finCookie="Wed, 28-Jun-2017 17:24:46 GMT";
  2.  
  3. function setCookie(name,value){
  4. document.cookie=name+"="+value+";expires="+glob_finCookie;
  5. }
  6.  
  7. //Lecture d'un cookie
  8. //retourne une chaine vide si le cookie n'existe pas
  9. function getCookie(name){
  10. var cookie_existe=false;
  11. var cookie_debut=0;
  12. var cookie_fin=0;
  13. var cookie_doc=document.cookie;
  14. var i=0;
  15. while (i<=cookie_doc.length){
  16. cookie_debut=i;
  17. cookie_fin=cookie_debut+nameCookie.length;
  18. if (cookie_doc.substring(cookie_debut,cookie_fin)==name){
  19. cookie_existe=true;
  20. break;
  21. }
  22. i++;
  23. }
  24. if (cookie_existe){
  25. cookie_debut=cookie_fin+1;
  26. cookie_fin=document.cookie.indexOf(";",cookie_debut);
  27. if(cookie_fin<cookie_debut){
  28. cookie_fin=document.cookie.length;
  29. }
  30. return document.cookie.substring(cookie_debut,cookie_fin);
  31. }
  32. return "";
  33. }

Création du cookie dans un document html

  1. <a href="javascript:setCookie('msg','bonjour')"><img src="bouton.gif" />Cliquez-ici</a>

Affichage du cookie dans un document


Codes HTML, JavaScript, HTML  (16 lignes) :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <title>Test Cookie</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <meta http-equiv="CONTENT-LANGUAGE" CONTENT="fr">
  5. </head>
  6. <h1>Test de cookie</h1>
  7. <script language="JavaScript" type="text/javascript">
  1.  
  2. document.write(getCookie('msg'));
  1.  
  2. </script>
  3. </body>
  4. </html>

 

Où sont stockés les cookies ?

Ce tableau permet d'avoir un premier aperçu des différents endroits de stockage des cookies, mais la localisation des cookies varie selon la configuration du système d'exploitation et la version du navigateur.

NavigateurVersionSystème d'exploitation#Localisation
Légende 
U=fichier unique; M=fichiers multiples (un par serveur)
Windows 9x=Windows 95+Windows 98+Windows ME
OperaUcookiesX.dat
Exemple : C:\Program Files\Opera\cookies4.dat
NetscapeUcookie.txt
Exemple : C:\Program Files\Netscape\Users\Nomsite\cookies.txt
NetscapeLinuxUcookie.txt
∼/.netscape/cookies.txt
Netscape4Windows 9xUcookie.txt
%programfiles%\Netscape\Users\default\cookies.txt
%programfiles% correspondant le plus souvent à C:\Program Files
Netscape7Windows 2000/XpUcookie.txt
%HOMEPATH%\Application Data\Mozilla\Profiles\\cookies.txt
%HOMEPATH% correspondant le plus souvent à C:\Documents and Settings
Internet Explorer1.5Windows NTM%SystemRoot%\cookie.jar
%SystemRoot% correspondant le plus souvent à C:\WINNT
Internet Explorer2.0Windows toutes versionsM%programfiles%\Plus!\Microsoft Internet\cookie.jar
Internet Explorer3.0Windows NT 3.51Memcookie.dat dans le répertoire d'installation de IE.
Internet Explorer3.0Windows NT4M%SystemRoot%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\thomas_more@infobrol.txt
Internet Explorer3.0Windows 9xM%WinDir%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\thomas_more@infobrol.txt
Internet Explorer>4Windows NT4M%SystemRoot%\profiles\%USERNAME%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\thomas_more@infobrol.txt
Internet Explorer>4Windows 9xM%WinDir%\Cookies\%USERNAME%@.txt
Exemple :
C:\Windows\Cookies\thomas_more@infobrol.txt
Internet Explorer>4Windows 2000/XpM%USERPROFILE%\Cookies\%USERNAME%@.txt
Exemple :
C:\Users\thomas_more\Cookies\thomas_more@infobrol.txt

 

Réseaux sociaux

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher les interactions avec les réseaux sociaux sur ces pages.

 

Nuage de mots clés

10 mots clés dont 0 définis manuellement (plus d'information...).

Avertissement

Cette page ne possède pas encore de mots clés manuels, ceci est donc un exemple automatique (les niveaux de pertinence sont fictifs, mais les liens sont valables). Pour tester le nuage avec une page qui contient des mots définis manuellement, vous pouvez cliquer ici.

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher le nuage de mots clés.

 

Notes

  1.  Sensible à la casse : cela signifie qu'une distinction est faite entre les lettres majuscules et minuscules.

  2.  Uniform Resource Locator : correspond à « localisateur uniforme de ressource” en français

  3.  URL : “Uniform Resource Locator” (en français, « localisateur uniforme de ressource »)

  4.  jour de la semaine : correspond à “week day » en anglais

  5.  jour du mois : correspond à “day » en anglais

  6.  mois : correspond à “month » en anglais

  7.  année : correspond à “year » en anglais

  8.  heure : correspond à “hour » en anglais

  9.  temps moyen de Greenwich : correspond à “Greenwich Mean Time » en anglais

 

Astuce pour imprimer les couleurs des cellules de tableaux : http://www.gaudry.be/ast-rf-450.html
Aucun commentaire pour cette page

© Ce document issu de l′infobrol est enregistré sous le certificat Cyber PrInterDeposit Digital Numbertection. Enregistrement IDDN n° 5329-202
Document créé le 19/03/02 01:00, dernière modification le Mercredi 28 Juin 2017, 15:26
Source du document imprimé : http:///www.gaudry.be/javascript-cookie.html
St.Gaudry©07.01.02
Outils (masquer)
||
Recherche (afficher)
Recherche :

Utilisateur (masquer)
Apparence (afficher)
Stats (afficher)
15838 documents
455 astuces.
550 niouzes.
3107 definitions.
447 membres.
8121 messages.

Document genere en :
0,99 seconde

Mises à jour :
Mises à jour du site
Citation (masquer)
On s'étonne trop de ce qu'on voit rarement et pas assez de ce qu'on voit tous les jours.

Madame de Genlis
 
l'infobrol
Nous sommes le Mercredi 28 Juin 2017, 19:24, toutes les heures sont au format GMT+1.00 Heure, heure d'été (+1)