Utilisation des cookies en Javascript

Publié le 17 Septembre 2010, 00:36am

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 ou temporaire.

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 .
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 ou de l'ordinateur 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:

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 et value. Nous créons ensuite le cookie grâce document.cookie qui stockera le cookie sur la machine du visiteur dans C:\WINDOWS\cookies et dans C:\WINDOWS\Temporary Internet Files .

Ceci créera donc un cookie ayant pour nom name et pour valeur value, alors pourquoi mettre un = après le nom et un ; :?: 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 .

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 ):

//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:

expires=" + expdate.toGMTString() ;

Ce qui donne au final le script suivant:

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:

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 et cookValue.
Ensuite on récupère la position de = que nous avons rajouté dans le cookie grâce à la fonction SetCookie:
document.cookie = name + ”=” + value + ”;……
Maintenant on peut récupérer le nom du cookie grâce à la méthode subtring().

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

var chaine = "coucou" ;

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

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

nous retournera uc, et

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:

<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 .

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:

<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() au chargement de la page <body onLoad=“GetCookie()”>.
Remarquez que le bouton lance la fonction SetCookie() avec comme paramètre la valeur du champ login.

Voici maintenant le JavaScript:

<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() ;

}