JavaScript Comment utiliser les cookies?

.Un cookie est souvent utilisé pour identifier un utilisateur.....

Qu’est ce qu’un Cookie ?

JavaScript cours tutorial

Un cookie est une variable qui est stockée sur l'ordinateur du visiteur. Chaque fois que l'ordinateur demande une page avec un navigateur, il enverra le cookie avec les différentes variables d’informations envoyées en générale vers le serveur. 

Avec JavaScript, vous pouvez créer et récupérer des valeurs de cookie.

Un cookie est constitué de paire nom/valeur :

la première fois qu'un visiteur arrive sur votre page web, il ou elle doit remplir en son nom, son login ou toute autre information que vous lui demandez. Ces informations ou une partie  peuvent ensuite être stocké dans un cookie. La prochaine fois, que le visiteur arrive sur votre page, il ou elle pourrait obtenir un message de bienvenue comme « Bienvenue Carabde! » Ce nom est extrait du cookie qui a été stocké sur son PC.

la première fois qu'un visiteur arrive sur votre page web, la date actuelle est stockée dans un cookie.La prochaine fois, que le visiteur arrive sur votre page, il ou elle pourrait obtenir un message du genre "votre dernière visite était le samedi 22 août 2010!" La date est récupérée à partir du cookie stocké

Comment créer un Cookie et y stocker des informations

Dans cet exemple, nous allons créer un cookie qui stocke le nom d'un visiteur. La première fois qu'un visiteur arrive sur la page web, il ou elle va  remplir un formulaire avec son nom et peut être d’autres informations. Le nom est ensuite stocké dans un cookie. La prochaine fois que le visiteur arrive sur la même page, il ou elle recevra un message de bienvenue.

Tout d'abord, nous créons une fonction qui contient le nom du visiteur dans une variable de cookie :

Sélectionner le code

  function setCookie(nomCookie,valeur,jourExperation)
  {
  var expireDate=new Date();
  expireDate.setDate(expireDate.getDate() + jourExperation);
  var c_valeur=escape(valeur) + ((jourExperation==null) ? "" : ";
  expires="+expireDate.toUTCString());
  document.cookie=nomCookie + "=" + c_valeur;}

 

Les paramètres de la fonction ci-dessus contiennent le nom du cookie, la valeur du cookie et le nombre de jours avant expiration du  cookie.

Dans la fonction ci-dessus nous convertissons tout d'abord le nombre de jours en une date valide, puis nous ajoutons le nombre de jours pour lequel le cookie va expirer. Après, nous enregistrons le nom de cookie, la valeur du cookie et la date d'expiration dans l'objet document.cookie.

Comment obtenir la valeur de Cookie ?

Pour récupérer la valeur du cookie c'est-à-dire les informations qu’il contient, nous créons une autre fonction qui retourne la valeur d'un cookie spécifié :

Sélectionner le code

  function getCookie(nomCookie)
  {
  var c_valeur = document.cookie;
  var c_debut= c_valeur.indexOf("" + nomCookie + "=");
  if (c_debut== -1)
    {
    c_debut= c_valeur.indexOf(nomCookie + "=");
    }
  if (c_debut== -1)
    {
    c_valeur = null;
    }
  else
    {
    c_debut= c_valeur.indexOf("=", c_debut) + 1;
    var c_fin= c_valeur.indexOf(";", c_debut);
    if (c_fin== -1)
    {
  c_fin= c_valeur.length;
  }
  c_valeur = unescape(c_valeur.substring(c_debut,c_end));
  }
  return c_valeur;
  }
   

 

Le code ci-dessus utilise quatre fois la méthode indexOf() pour rechercher un nom de cookie à l'intérieur de la chaîne document.cookie stockée dans la variable c_valeur.

La première méthode indexOf() pour déterminer  la position où se trouve le cookie. Le "" + et + "=" est ajoutée afin que la méthode  trouver des noms ou valeurs contenant le nom spécifié du cookie.

Si la méthode retourne -1 donc le cookie n’existe pas , mais le cookie peut toujours exister au tout début de la chaîne de cookie. Pour éviter cela, une autre recherche est ajoutée, cette fois sans les "" +.

En fin une recherche du « ; » pour finir la recherche et à l’aide de la fonction substring()  on extrait de la chaine document.cookie la valeur du cookie déterminée.

Note : On peut utiliser les expressions régulières pour trouver la valeur du cookie.

Utiliser la valeur du Cookie

Nous créons la fonction qui affiche un message de bienvenue si le cookie est défini, et si le cookie n'est pas défini, il affichera une boîte de dialogue, demandant le nom de l'utilisateur et stocke le cookie identifiant pendant 365 jours, en appelant les  fonction setCookie et getCookie que nous avons défini ci-dessus:

Sélectionner le code

  function checkCookie()
  {
  var nomUtilisateur=getCookie("nomUtilisateur");
    if (nomUtilisateur!=null && nomUtilisateur!="")
    {
    alert("Bien venu  " + nomUtilisateur + " merci pour votre retour dans le
  site" );
    }
  else 
    {
    nomUtilisateur=prompt("Entrez votre nom s’il vous plais:","");
    if (nomUtilisateur!=null && nomUtilisateur!="")
      {
      setCookie("nomUtilisateur",nomUtilisateur,365);
      }
    }
  }
   

 

Exemple Gestion de cookie en javascript

Rassemblons toutes les fonction que nous avons défini toute au long de cet article pour créer un script pour la gestion des cookies.

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title>Exemple fonction pour manipuler les cookies</title>
  <script>
  function getCookie(NomDuCookie)
  {
  var valeurCookie = document.cookie;
  var c_debut = valeurCookie.indexOf(" " + NomDuCookie + "=");
  if (c_debut == -1)
    {
    c_debut = valeurCookie.indexOf(NomDuCookie + "=");
    }
  if (c_debut == -1)
    {
    valeurCookie = null;
    }
  else
    {
    c_debut = valeurCookie.indexOf("=", c_debut) + 1;
    var c_fin = valeurCookie.indexOf(";", c_debut);
    if (c_fin == -1)
      {
      c_fin = valeurCookie.length;
      }
    valeurCookie = unescape(valeurCookie.substring(c_debut,c_fin));
    }
  return valeurCookie;
  }
   
  function setCookie(NomDuCookie,value,jourExpire)
  {
  var expiredate=new Date();
  expiredate.setDate(expiredate.getDate() + jourExpire);
  var valeurCookie=escape(value) + ((jourExpire==null) ? "" : ";
  expires="+expiredate.toUTCString());
  document.cookie=NomDuCookie + "=" + valeurCookie;
  }
   
  function checkCookie()
  {
  var nomUtilisateur=getCookie("nomUtilisateur");
  if (nomUtilisateur!=null && nomUtilisateur!="")
    {
    document.getElementById("dmo").innerHTML="Bien venue "+nomUtilisateur;
    }
  else
    {
    nomUtilisateur=prompt("Entrez votre nom s'il vous plait:","");
    if (nomUtilisateur!=null && nomUtilisateur!="")
      {
      setCookie("nomUtilisateur",nomUtilisateur,365);
           document.getElementById("dmo").innerHTML="Bien venue "+nomUtilisateur;
      }
    }
  }
  </script>
  </head>
  <body onload="checkCookie()">
  <p id="dmo">Bieen venu visiteur</p>
  </body>
  </html>

 

L'exemple précédent exécute la fonction checkCookie() lors du chargement de la page.

Comment supprimer un cookie

Une dernière chose que vous devez savoir pour la gestion des cookies est la fonction pour supprimer un cookie.

En réalité un cookie  ne peut pas être supprimé directement.

Pour supprimer un cookie on utilise l’astuce de redéfinir le cookie en lui donnant une date d’expiration déjà passée ainsi on oblige l’explorateur de supprimer ce cookie qui a expiré.

Exemple supprimer un cookie

Sélectionner le code

  <script>
  function delCookie (NomDuCookie)
  { if (getCookie(NomDuCookie)) {
  document.cookie = NomDuCookie + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
  }
   
  </script>

 
Par carabde 30 mars 2014