La gestion des cookies avec javascript

Les cookies sont une invention de Netscape qui date de plus d’une décennie et ils ont été utiles pour les webmasters depuis lors. En effet, ces petits fichiers textes sauvegardées par le navigateur web permets à un site web d’enregistrer des données importantes qui vont servir aux visiteurs récurrents, comme conserver un choix qui influence l’affichage de certaines informations sur les pages, ou, ce qui est très fréquent, permettre aux visiteurs d’accéder à certaines parties du site sans devoir insérer leurs nom d’usager et mot de passe à chaque fois, ce qui devient agaçant.

Plusieurs langages de programmation peuvent contrôler les cookies, comme PHP, ASP, ou, pour notre article, Javascript. Javascript est un langage dont les fonctions résident dans la page html elle-même et n’exige pas de programme spécifique au niveau du serveur, ce qui le rends populaire auprès des propriétaires de site web avec des services d’hébergements gratuits, dont les services sont très limités.

Comment alors sauvegarder certaines informations avec javascript pour pouvoir les consulter par la suite? Voici quelques fonctions utiles pour ces tâches:

Sauvegarder une variable dans un cookie

Supposons que nous voulons sauvegarder la valeur d’une question qui demande la couleur préférée de l’utilisateur:

function setCookie(c_name, value, expiredays) {

var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}

Cette fonction simplifie le processus de sauvegarde. Voici comment l’utiliser:

c_name désigne le nom du cookie pour votre tâche spécifique.
value désigne la valeur que vous voulez enregistrer.
expiredays désigne la longévité du cookie, c’est à dire combien de temps vous voulez enregistrer cette information. Une valeur de 0 indique que le cookie n’existe que pendant la session, et il sera effacée quand le navigateur web sera fermé (par exemple, dans le cas d’un accès à une page qui requiert un mot de passe à chaque fois). Une valeur de 365 indique 365 jours, soit une année.

Exemple:

var couleur = "bleu";
setCookie("couleur_favorie", couleur, 365);

Si vous avez un formulaire qui pose cette question, celle-ci peut conserver la réponse, et vous pouvez la rappeller à l’utilisateur dans n’importe quelle autre page qui accède ce cookie. Il est à noter que la nouvelle valeur insérée dans un cookie n’est accessible qu’une fois que la page a été rafraichie.

Lire une variable dans un cookie

Alors comment accéder à la valeur de notre cookie couleur_favorie? Avec la fonction suivante:

function getCookie(c_name) {

if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1; 
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    } 
  }
return "";

}

Cette fonction va chercher la valeur enregistrée dans notre cookie nommé couleur_favorie:

var couleur = getCookie("couleur_favorie");
alert("Votre couleur favorie est " + couleur);

Ce qui donne un message pop-up comme suit: Votre couleur favorie est bleu

Rappelons que le nombre de cookie possible pour un site web est limité à 20 et que l’information enregistrée dans un cookie est elle-même limitée à 4 ko.

Pour en savoir plus, lire la page de HTTP cookie de wikipedia.org [en]. Merci à w3schools.com [en] pour les fonctions javascript.