La gestion des cookies en JavaScript

Chaque cookie possède un couple nom / valeur qui contient les données actuelles. Le nom du cookie est destiné à vous aider, il vous suffira de chercher ce nom lorsque vous lirez les cookies de la page.

Si vous souhaitez lire le contenu d'un cookie, commencez par chercher son nom, puis la valeur qui lui est associée. Bien sûr, c'est à vous de décider quelle(s) valeur(s) peut avoir un cookie et d'écrire des scripts pour traiter cette (ces) valeur(s).

Chaque cookie doit avoir une date d'expiration au-delà de laquelle il ne sera plus valide et supprimé. Si vous ne renseignez pas cette date, le cookie sera supprimé à la fermeture du navigateur. Cette date est exprimée au format UTC (Greenwich).

Chaque cookie possède également un domaine et une arborescence. Le domaine indique au navigateur à quel domaine (quel site) le cookie doit être envoyé. Si vous ne l'indiquez pas, le domaine correspondra à celui qui a créé le cookie : dans cette page, par exemple, ppk.developpez.com.
Notez que l'utilité du domaine est d'autoriser l'envoi du cookie aux sous-domaines associés. Mon cookie ne pourra pas être lu depuis www.developpez.com puisque par défaut, son domaine est ppk.developpez.com. Si je précise le domaine developpez.com, alors www.developpez.com pourra lui aussi lire le cookie.
Je ne peux pas affecter un domaine sur lequel je ne me trouve pas : quirksmode.org par exemple. Dans notre cas, seul developpez.com est autorisé.

L'arborescence vous permet d'indiquer un répertoire sur lequel le cookie sera actif. Par exemple, si vous voulez que le cookie ne soit envoyé que vers le répertoire tutoriels, spécifiez /tutoriels comme arborescence. Habituellement, l'arborescence est /, ce qui signifie que le cookie est valide sur l'intégralité du domaine.
C'est comme cela que fonctionnent les scripts proposés. Les cookies créés sur cette page seront envoyés sur toutes les pages de www.developpez.com (bien que seule cette page contienne un script permettant de les récupérer et de les utiliser).

Lorsque vous appelez createCookie(), vous devez lui passer trois paramètres : le nom et la valeur du cookie ainsi que le nombre de jours pendant lequel il restera actif. Voici un exemple pour lequel ppkcookie=testcookie sera actif 7 jours :

createCookie('ppkcookie','testcookie',7)

Si le nombre de jours vaut 0, le cookie sera effacé à la fermeture du navigateur. Si vous mettez un nombre négatif de jours, le cookie sera effacé immédiatement.

La fonction reçoit donc ses paramètres et commence son exécution :

function createCookie(name,value,days) {

Tout d'abord, elle vérifie que le paramètre days est présent. Si ce n'est pas le cas, nous n'avons pas besoin de faire de calculs sur la date :

if(days) {

Si le paramètre existe, nous créons un nouvel objet Date() contenant la date du jour :

var date = new Date();

Puis nous récupérons le temps actuel (en millisecondes) auquel on ajoute le nombre de jours (millisecondes également). Nous affectons alors à la propriété time de la variable date la valeur calculée. date a maintenant pour valeur la date en millisecondes à laquelle le cookie doit expirer :

date.setTime(date.getTime()+(days*24*60*60*1000));

Ensuite, nous affectons cette date au format UTC/GMT à la variable expires :

var expires = "; expires="+date.toGMTString();

Si 0 est passé comme paramètre, expires n'est pas définie, ce qui provoque l'effacement du cookie à la fermeture du navigateur :

else var expires = "";

Enfin, nous écrivons le nouveau cookie dans document.cookie avec la syntaxe adéquate :

document.cookie = name+"="+value+expires+"; path=/";

Le cookie est désormais créé.

Pour lire un cookie, nous appelons readCookie() à laquelle nous passons en paramètre le nom du cookie. Affectez le résultat de la fonction à une variable et testez si la variable à une valeur (si le cookie n'existe pas, la fonction renvoie null, ce qui peut perturber votre propre fonction), puis effectuez vos traitements :

var x = readCookie('ppkcookie1')
if (x) {
	// Traitement de la valeur du cookie
}

La fonction reçoit donc son paramètre et commence son exécution :

function readCookie(name) {

Nous allons commencer par chercher le nom du cookie suivi du signe "=". Stockons cette chaîne dans la variable nameEQ :

var nameEQ = name + "=";

Ensuite, effectuons un split(';') sur document.cookie : ainsi la variable ca contient un tableau de tous les cookies de ce domaine et de cette arborescence :

var ca = document.cookie.split(';');

Nous parcourons alors ce tableau (nous bouclons sur tous les cookies trouvés) :

for(var i=0;i < ca.length;i++) {

Appelons c le cookie en cours :

var c = ca[i];

Si le premier caractère est un espace, nous le retirons à l'aide de la méthode substring(). Nous réitérons cette étape tant que le premier caractère est un espace :

while (c.charAt(0)==' ') c = c.substring(1,c.length);

Maintenant, c commence par le nom du cookie courant. Si c'est le nom que nous cherchons :

if (c.indexOf(nameEQ) == 0)

alors nous avons trouvé notre cookie. Nous voulons retourner la valeur du cookie, qui correspond à la partie de c qui vient juste après nameEQ. Nous retournons donc cette valeur et sortons de la fonction : sa mission est terminée.

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

Si, après avoir passé tous les cookies en revue, nous n'avons pas trouvé le nom recherché, cela signifie que le cookie n'existe pas. Nous retournons alors null :

return null;

Effacer un cookie est très simple.

eraseCookie('ppkcookie')

Il suffit de passer à la fonction le nom du cookie à effacer :

function eraseCookie(name) {

puis appelons la fonction createCookie() pour affecter au cookie une date d'expiration passée correspondant à la veille :

createCookie(name,"",-1);

Le navigateur se rend compte que le cookie n'est plus valide et l'efface immédiatement.