Qu'est-ce qu'un cookie ?
Un cookie est un fichier texte enregistré sur la machine du visiteur et qui permet de stocker des informations de manière permanente.

Le contenu d'un cookie est généralement très bref en voici une extrait:
QUOTE

qwix
http://www.dreamweaver-forum.net
~~local~~/C:\WINDOWS\BUREAU\qwix\
0
2613565440
29610860
593674240
29537435
*


Quand les utiliser ?
Les cookies sont généralement utilisé pour :

    Faire des compteurs de visites.
    Retenir votre identifiant de messagerie, ou des informations personnelles (couleurs préférées...) pouvant être utiles et vous permettre
    une navigation plus aisée wink.gif .
    Réaliser des caddies sur les sites d'achats.
    Tranférer des informations d'une page d'un site à une autre page (du même site) .


      Quelles sont les propriétés des cookies ?

        Le nom, nécessaire à identifier le cookie correspondant au site, sur la machine cliente.
        La valeur, qui pourra être récupérée ultérieurement par le site.
        La date d'expiration qui, quand elle est précisée permet au cookie d'être détruit au hout d'un temps définis. Si rien n'est précisé le cookie sera détruit après son utilisation.
        La nom du domaine qui a déposé le cookie. Notez que cette option est facultative.
        Le chemin qui indique d'ou vient le cookie. Cette option est facultative.
        La variable secure qui indique si le cookie est sécurisé ou non. Cette option est facultative.


          En fait les deux valeurs obligatoires pour créer un cookie sont le nom et la valeur.

          Voyons tout de suite une exemple simple:

          Tout d'abord la fonction qui permet de déposer le cookie:
          CODE


          function SetCookie (name, value)

          {    

          //creation du cookie de nom name et de valeur saisie en paramètre

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

          }



          Cette procédure est toute simple:
          Elle admet deux paramètres name .

          Ceci créera donc un cookie ayant pour nom name :?: Tout simplement parce que le cookie stocke une chaine de caractère sans séparateur donc au moment de récupérer le nom et la valeur du cookie, ce n'est pas très facile, c'est pourquoi on ajoute généralement un (ou plusieurs) caractère pour séparer les informations afin de les récupérer
          plus facilement wink.gif .

          img:remarque Dans ce cookie seules les deux valeurs obligatoires pour créer un cookie ont été utilisées il n'y a ni date d'expiration, chemin, nom de domaine.. de précisé .

          Cela signifie donc que le cookie sera détruit à la fermeture du navigateur. Par contre si vous désirez que votre cookie soit toujours présentsur la machine cliente il vous s'uffit de rajouter ceci à SetCookie ( name, value ):
          CODE


          //nouvel objet date

          var aujourdhui = new Date();



          //nouvel objet date

          var expdate = new Date();



          //plus an an à partir d'aujourdh'ui le cookie ne s'efface jamais

          expdate.setTime( aujourdhui.getTime() + ( 365*24*60*60*1000 ) );



          Avec, à la suite de notre instruction document.cookie:
          CODE


          expires=" + expdate.toGMTString();



          Ce qui donne au final le script suivant:
          CODE


          function SetCookie (name, value)

          {    

          //nouvel objet date

          var aujourdhui = new Date();



          //nouvel objet date

          var expdate = new Date();



          //plus an an à partir d'aujourdh'ui le cookie ne s'efface jamais

          expdate.setTime( aujourdhui.getTime() + ( 365*24*60*60*1000 ) )



          //creation du cookie

          document.cookie = name + "=" + value + ";expires=" + expdate.toGMTString();

          }



          Voyons maintenant comment récupérer la valeur du cookie:
          CODE


          function GetCookie ()

          {    

          var cookValue = "";

          var cookName = "";



          //position de "=" dans le cookie

          var egal= document.cookie.indexOf( "=" );



          cookName = document.cookie.substring ( 0, egal );



          //on prend la sous-chaine comprise entre le "=" et le ";" donc sa valeur

          cookValue = document.cookie.substring ( egal + 1 );



          //affiche le nom du cookie

          document.write ( "<br>cookName vaut: <b>" + cookName + "</b>" );



          //affiche la valeur du cookie

          document.write ( "<br>cookValue vaut: <b>" + cookValue + "</b>" );

          }



          Nous avons créé la procédure GetCookie().
          On initialise nos deux variables cookName.
          Ensuite on récupère la position de =:
          document.cookie = name + .
          Maintenant on peut récupérer le nom du cookie grâce à la méthode.

          Celle-ci nous permet de récupérer une chaine comprise entre deux bornes définies par exemple:

          CODE


          var chaine = "coucou";

          var resultat = chaine.substring ( 2, 4 );

          document.write ( "Le résultat est :<b>: " + resultat );



          nous retournera uc, et

          CODE


          var chaine = "coucou";

          var resultat = chaine.substring ( 2 );

          document.write ( "Le résultat est :<b>: " + resultat );



          nous retournera ucou , car seule la borne de départ à été définie donc substring() nous retourne le reste de la chaine à partir de la position 2.

          Nous récupérons le nom et la valeur du cookie et nous les affichons.

          Voici donc le script complet téléchargeable ici (clic droit "enregistrer la cible sous..." ) pour utiliser ce cookie:
          CODE


          <script language="JavaScript">



          //récupère le nom et la valeur du cookie

          function GetCookie ()

          {    

          var cookValue = "";

          var cookName = "";



          //position de "=" dans le cookie

          var egal = document.cookie.indexOf( "=" );    



          //on prend la sous-chaine comprise entre le début du cookie et le "="

          cookName = document.cookie.substring ( 0, egal );



          //on prend la sous-chaine comprise entre le "=" et le ";" donc sa valeur

          cookValue = document.cookie.substring ( egal + 1 );



          //affiche le nom du cookie

          document.write ( "<br>cookName vaut: <b>" + cookName + "</b>" );



          //affiche la valeur du cookie

          document.write ( "<br>cookValue vaut: <b>" + cookValue + "</b>" );

          }



          //crée le cookie avec la valeur saisie en paramètre  

          function SetCookie (name, value)

          {        

          //nouvel objet date

          var aujourdhui = new Date();



          //nouvel objet date

          var expdate = new Date();



          //plus an an à partir d'aujourdh'ui le cookie ne s'efface jamais

          expdate.setTime( aujourdhui.getTime() + ( 365*24*60*60*1000 ) );



          //creation du cookie de nom name et de valeur saisie en paramètre

          document.cookie = name + "=" + value + ";expires=" + expdate.toGMTString();

          }



          //demande à l'utilisateur un nom et une valeur de cookie

          function Ask ()

          {

          var nom = prompt ( "veuillez entrez le nom du cookie SVP", "" );

          var valeur =  prompt ( "veuillez entrez la valeur du cookie SVP", "" );



          //création du cookie

          SetCookie ( nom, valeur );



          //récupération du nom et de la valeur

          GetCookie ();

          }



          //Lancement de la Ask()

          Ask ()

          </script>



          Ce cookie était assez simple, vous trouverez ici (clic droit "enregistrer la cible sous..." ) un script complet de cookie, libre d'utilisation qui vous sera j'en suis sur très utile, je tient à préciser que je n'en suis pas l'auteur wink.gif .

          Voyons maintenant une application concrète, nous allons retenir votre identifiant de messagerie:
          Pour cela il vous s'uffit simplement d'aller sur votre messagerie et de vous identifier comme d'habitude:
          Soit le HTML suivant:
          QUOTE

          <body onLoad=\"GetCookie()\">

          <form name=\"messagerie\">
          <div align=\"center\">
          <table border=\"0\">
          <tr>
          <td>Entrez votre identifiant de messagerie</td>
          <td><input type=\"text\" name=\"login\"></td>
          </tr>
          <tr>
          <td>Entrez votre mot de passe</td>
          <td><input type=\"password\" name=\"pass\"></td></tr>
          <tr>
          <td colspan=\"2\"><center><input type=\"button\" value=\"valider\" onClick=\"SetCookie(this.form.login.value)\"></center></td>
          </tr>
          </table>
          </div>
          </form>

          </body>


          On lance la fonction GetCookie().
          Remarquez que le bouton lance la fonction SetCookie().

          Voici maintenant le JavaScript:
          CODE


          <script language="javascript">



          //récupère la  valeur du cookie

          function GetCookie ()

          {    

          var cookValue = "";



          //on récupère la position du "=" dans le cookie

          var egal = document.cookie.indexOf( "=" );

           

          //on prend la sous-chaine comprise entre le "=" et le ";" donc sa valeur

          cookValue = document.cookie.substring ( egal + 1 );



          if ( cookValue == "" )

          {

          //ne fait rien

          return false;

          }

          else

          {

          //affiche la valeur du cookie dans le champ "login" du formulaire "messagerie"

          document.messagerie.login.value = cookValue;

          }

          }



          //crée le cookie avec la valeur saisie en paramètre  

          function SetCookie ( value )

          {        

          //nouvel objet date

          var aujourdhui = new Date();



          //nouvel objet date

          var expdate = new Date();



          //plus an an à partir d'aujourdh'ui le cookie ne s'efface jamais

          expdate.setTime( aujourdhui.getTime() + ( 365*24*60*60*1000 ) );



          //creation du cookie de nom name et de valeur saisie en paramètre

          document.cookie = "Login=" + value + ";expires=" + expdate.toGMTString();

          }



          Remarquez que la fonction SetCookie().

          Vous pouvez télécharger ce script ici (clic droit "enregistrer la cible sous..." ) et le réutiliser comme bon vous semble wink.gif

          img:coupe
          Pour toute question concernant ce tutorial merci d'utiliser les salles du forum
          smile.gif