digital-nation

Dans un post précédent je vous indiquais comment changer le style "à la volée" grâce à un styleswitcher (en javascript).
Je vous informais aussi que pour avoir une valeur permanente, il nous fallais enregistrer le choix dans un cookies.

De fait, voyons comment créer un cookies dans ce post.

La création d'un cookies se fait aisément par document.cookies.
Pour la création il nous faut aussi quelques paramètres. Ces paramètres sont :

1. Name : permet de donner un nom (un identifiant unique), sa valeur est une chaine de caractère (string) ;
   
2. Contenu : le contenu à inscrire dans le cookies ;
   
3. Expires : détermine via l'objet Date une date d'expiration du cookies ;
   
4. Path : indique le répertoire où le cookies est valide, c'est à dire que toute page se trouvant dans le répertoire et ayant une fonction de lecture du cookies sera prise en compte ;
   
5. Domaine : indique le nom d'hote dans lequel le cookies est valide ;
   
6. Secure : informe que le cookies ne sera lu que sur un protocole HTTPS ;
   

Passons maintenant à une petite fonction simple :

function monCookie(nomCookies, valeurCookies, dateCookies) {
  document.cookie = nomCookies + "=" + 
      escape(valeurCookies) + (( dateCookies == null) ? "" : ("; dateCookies = " + 
      dateCookies.toGMTString())); }

Petite explication :

• toGMTString() : transforme la chaine de caractère date en valeur date au format GMT ;
  
• dateCookies == null : vérifie que la date du cookies est renseigné, à défaut, ne renseigne pas de date d'expiration ;
  
• escape(valeurCookies) : transforme la valeur du cookies en valeur ASCII, son contraire est unescape(valeurCookies) et cette fonction sera utilisée dans la lecture du cookies ;
  
• document.cookie : crée le cookies ;
  

Comme annoncé précédement, vu que nous utilisons ici la fonction escape(), nous devons évidement utiliser une fonction unescape(). Le principe est simple, nous trouvons le cookies, nous lisons le contenu du cookies et nous "décryptons" le cookies.

Faisons le point :

function decryptCookies(valeurDecrypt){
  var chaineCookies = document.cookie.indexOf (";", valeurDecrypt);
  if (chaineCookies == -1)  { chaineCookies = document.cookie.length; }
  return unescape(document.cookie.substring(valeurDecrypt, chaineCookies));  }

Que se passe t'il ici ?
Simplement que par un transfers d'une valeur dans la fonction (par la variable valeurDecrypt), je demande que l'on sépare à chaque ";" du contenu de la variable valeurDecrypt en une sous-chaine de caractère lisible (donc "décrypté" par unescape()).

Ceci n'est que pour décoder le contenu du cookies. Maintenant il nous faut accéder à ce cookies, et cela se fait via une autre petite fonction en Javascript (que nous baptiserons pourquoi pas : lireCookies).
Identiquement, à la création du cookies, cette fonction doit comporter un nombre certain de paramètre toutefois beaucoup plus restreint car je ne dois connaitre que le nom. Le restant des informations étant lu, je n'ai qu'à les extraires.

function lireCookies(nomCookies) {
  var argumentCookies = nomCookies + "=";
  var argumentLongeur = argumentCookies.length;
  var cookiesLongueur = document.cookie.length;
  var i = 0;
  while (i < cookiesLongueur){
    var j = i + argumentLongueur;
    if (document.cookie.substring(i, j) == argumentCookies) { 
        return decryptCookies(j); i = document.cookie.indexOf(" ",i) + 1; }
    if (i == 0) { break; } } return null;  }

A nouveau passons en détail la fonction :

• nomCookies : est le nom du cookies que je dois lire... C'est la seule chose que l'on doit vraiment connaitre ;
  
• cookiesLongueur : est le nombre de sous-structure que comporte le contenu du cookies, c'est la valeur structurée en zone de mémoire que nous devrons "décrypter" via la fonction decryptCookies ;
  
• i : est la variable d'initialisation du compteur pour une boucle ;
  
• while (i < cookiesLongueur) : est la boucle informant que tant que la valeur de i est plus petite que le nombre maximum de la zone mémoire, il doit y avoir instruction contenu dans la boucle de la fonction de décryptage du cookies (via la fonction decryptCookies(valeur_a_decrypter) qui est ici j (le nombre de la zone mémoire à décrypter) ;
  

Ces 3 fonctions sont dissociable en 2 parties : écriture, lecture + décryptage.

Lorsque ces 3 fonctions sont connues, maitrisée et "installée", nous pouvons donc les utiliser dans de très simples appels javascript :

dateExpiration = new Date();
dateExpiration.setDate(dateExpiration.getDay() + 15); // expire dans quinze jour
monCookies("nomDuCookies", "valeurDuCookies", dateExpiration);

Identiquement pour lire le cookie, j'emploierais donc la syntaxe suivante :

var o;
o = lireCookies('nomDuCookies');

N'oublions pas que le Javascript (je ne le répèterais jamais assez) est un langage client, donc pas obligatoirement exécuté par le logiciel du visiteur et même si ce langage est interprété par l'internaute, ce dernier peut avoir configuré le navigateur pour qu'il n'accepte pas les cookies.
Ce type de fonction est donc à interpréter avec parcimonie.

Source des codes : fr.selfhtml.org, Conseil-Creations.com, CommentCaMarche.com, etc. ; remanié par Groumphy.