Structure d'un cookie
Créer et écrire un cookie
Lire un cookie
Cookie Mixte
Exemple simple

Structure d'un cookie

Un cookie est un ensemble d'infos stockés sur le disque dur de l'utilisateur pour faciliter la navigation mais aussi pour être reconnu.
Il ne peut contenir que ce que l'utilisateur a bien voulu donner et ne peut en aucun cas transporter un virus ou des informations confidentielles.

Il comprend :

Un nom (obligatoire)

défini dans le champ name, c'est une valeur alphanumérique quelconque qui ne doit pas contenir de point virgule, de virgule, de caractère blanc (ex valide : "Cc=R021%_cOnCePt")

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

auquel peuvent s'ajouter d'autres paramètres facultatifs , à savoir :

Une date d'expiration

définie dans le champ expires, indique jusqu'à quelle date le cookie peut être utilisé. C'est une valeur date exprimée sous la forme Sun,JJ-MM-AA HH:MM:SS GMT, le jour de la semaine étant en anglais abrégé (Sun, Mon, Tue, ...)
Si on ne précise pas de date d'expiration, le cookie expire à la fin de la session en cours.

// date d'expiration le 1er Janvier de l'an 2000 :
var dateExp="Sat, 01-Jan-2000 08:00:00 GMT";
ou
// date expiration 1 mois
var expdate=newDate();
var dateExp= expdate+(31*24*60*60*1000)

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

Un chemin

défini dans le champ path, indique la partie de l'URL pour lequel le cookie est valable. Si on ne précise pas de chemin, c'est celui du chemin du document créant le cookie qui est utilisé.
Par exemple, sur le serveur www.serveur.com, on désire que le cookie de nom cook, initialisé à essai ne soit accessible que pour les documents situés dans le répertoire concept

//On est dans le document http://www.serveur.com/concept/index.htm
//Ce cookie sera "visible" à partir de http://www.serveur.com/concept/news.htm
//mais ne le sera pas depuis une autre adresse
document.cookie="cook=essai;expires=Wed, 31-Dec-1997 23:59:59 GMT;path=concept";

Un domaine

défini dans le champ domain, indique le domaine (=le serveur, ou une partie de l'adresse du serveur) pour lequel le cookie est valable. Effectivement, un serveur peut créer un cookie qui sera lu par un autre serveur. Si on ne définit pas de domaine, c'est celui du serveur créant le cookie qui est pris en compte

//On est dans http://www.serveur.com/concept/index.htm

//On désire que le cookie "cook_cool" soit lisible depuis le site "www.essai.com"
//www.serveur.com ne pourra plus lire le cookie, par contre www.essai.com le pourra
document.cookie="cook_cool=sebweb;expires=Wed, 31-Dec-1997 23:59:59 GMT;domain=www.essai.com";

Un navigateur comme Netscape a prévu la possibilité d'interdire ce genre d' "entente" entre serveurs. Cette distinction n'existe pas dans MSIE (versions actuelles : 4).

Un attribut de sécurité

défini par le "flag" secure, indique (s'il existe) que le cookie ne sera transmis que si la connexion vers le serveur est sécurisée (protocole HTTPS et non pas HTTP)

//le cookie "cook_cool" ne sera transmis que si la connexion est effectuée via https
document.cookie="cook_cool=sebweb;expires=Wed, 31-Dec-1997 23:59:59 GMT;secure";

Des Limitations

Elles concernent la taille et le nombre de cookies pouvant être stockés sur chaque poste client

300 cookies au total

4 KO par cookie

20 cookies par serveur ou domaine

Créer et Ecrire un cookie

Voici comment positionner et créer votre cookie à l'aide de la fonction setCookie(name,value,expdate) comme le montre l'exemple :

//-----------------VALEURS NON MODIFIABLES------------------ function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");}

//-----------------VALEURS MODIFIABLES------------------ var expdate = new Date (); expdate.setTime (expdate.getTime() + (1 * 30 * 24 * 60 * 60 * 1000)); // validité : 1 mois // a partir de formulaires SetCookie('nom',document.form1.nom_contact.value,expdate); SetCookie('prénom',document.form1.prenom_contact.value,expdate); // etc...etc... //à partir de données directes SetCookie('nom','rené',expdate); //a partir de propriétés javascript PROMPT Pnom = prompt('Entrer votre nom ',""); if (Pnom== null) { alert('OK Nous allons donc vous appeler René'); Pnom = 'René'; pathname = location.pathname; myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/'; SetCookie('nom',Pnom,expdate,myDomain); // confirmation du cookies alert(Vos renseignements ont bien été pris en compte\nMerci de votre confiance...'); //----------------------------FIN------------------------------

Dans le document HTML où on aura inséré le code ci-dessus, il suffit de rajouter d'autres scripts d'écriture, par exemple :

<a href="javascript:SetCookie('nom','René')"><img src="gif/test1.gif" width="97" height="52">Cliquez-ici</a>

Cette ligne crée le cookie nom et lui affecte la valeur René quand on clique sur l'image serveur.gif
Dans un autre document HTML, en ayant réécrit le script contenant les fonctions de base initiales, l'ajout du script suivant provoquera l'affichage de la valeur du cookie concept :

Lire un cookie

Voici comment exploiter et lire vos cookies à l'aide de la fonction GetCookie(value) comme le montre l'exemple :

//-----------------VALEURS NON MODIFIABLES------------------ function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; }

//-----------------VALEURS MODIFIABLES------------------ //ecrire ses données var infoNom=GetCookie('nom') document.write(infoNom) //etc... pour chaque info cookie à écrire //ecrire ses données dans un champ document.write('<form><input type=text name=nom value='+GetCookie("nom")+'></form>') //détecter l'existence de données var username = GetCookie('nom'); if (nom == null) { alert('Aucun cookie NOM present')} //----------------------------FIN------------------------------

Si vous le souhaitez vous pouvez effacer un cookie en ligne :

function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var supval = GetCookie (name);
if (supval != null)
document.cookie = name + "=" + supval + "; expires=" + exp.toGMTString();
}
document.write('<a href="javascript:DeleteCookie()">Effacer</a>')

Cookies à actions Mixtes

Création et lecture sur la même page...

Important : vous devez, pour exploiter, lire, écrire vos cookies sur une même page utiliser les fonctions GetCookie(value) mais aussi setCookie(name,value,expdate) sur le même document.

ex : compteur de visites

// placer ici la partie non modifiable de la fonction setCookie(name,value,expdate)
// placer ici la partie non modifiable de la fonction GetCookie(value)
var expdate = new Date ();
var biscuit = GetCookie("biscuit") ;
expdate.setTime (expdate.getTime() + (10 * 24 * 60 * 60 * 1000));//10 jours
(GetCookie("biscuit") == null )? (SetCookie("biscuit",1,expdate)) : (SetCookie("biscuit",++biscuit,expdate)) ;
var biscuit = GetCookie("biscuit");
document.write ("Cette session est votre" + biscuit + " visite.");

Exemple simple

Autre exemple

Soit un site avec une page d'accueil, puis un certain nombre d'autres pages, toutes de même niveau, et l'on veut que l'utilisateur "élise" une page favorite, qu'il pourra atteindre ensuite d'un simple click depuis la page d'accueil pour les visites futures.

Dans toutes les pages concernées, inclure le script suivant :
(ne pas oublier les fonctions de base newCookie et getCookie)

// placer ici la partie non modifiable de la fonction setCookie(name,value,expdate)
function recFavoritePage() {
//URL de la page en cours
var URL=this.location.href;
//mémorisation de cette page dans le cookie 'Favorite'
setCookie('Favorite',URL);
}

suivi de ce lien, à l'endroit où l'on veut placer le bouton d'action de mémorisation

<a href="javascript:recFavoritePage()">
<img src="favorite.gif">Cliquez-ici si cette page est votre favorite</a>

Et dans la page d'accueil, inclure le script suivant

// placer ici la partie non modifiable de la fonction GetCookie(value)</strong>
function goFavoritePage() {
//URL de la page favorite
var URL=getCookie('Favorite');
//Saut vers cette page (si non vide)
if (URL!="") {document.location.href=URL;}

suivi de ce lien, à l'endroit où l'on veut placer le bouton de branchement vers la page favorite :

<a href="javascript:goFavoritePage()">
<img src="/favorite.gif">Votre page favorite</a>