Gestion des cookies en JavaScript

Notion de cookie

Par l’intermédiaire de cookies, il est possible d’écrire sur le poste de l’internaute des informations de manière permanente. Sans cette possibilité il faudrait avoir recours à un langage de programmation "orienté serveur" (PHP, Microsoft ASP.NET par exemple) qui serait en mesure de stocker des données dans un système de gestion de base de données (MySQL, PostgreSQL...).

Les cookies qui se présentent comme de petits fichiers texte peuvent entreposer un nombre limité de données mais cette technique peut se révéler précieuse pour conserver des contenus de variables mémoire réutilisables au fil de la navigation au travers des nombreuses pages de votre site web (conservation d’identifiants, de mots de passe même si cela est dangereux, de préférences utilisateur...).

Il est à noter qu’il est possible d’interdire dans la grande majorité des navigateurs que les cookies soient utilisables. Il est vrai que cette technique est relativement intrusive. Un site marchand pourrait par exemple (sans vous prévenir) stocker sur votre disque dur vos préférences en matière d’achats et de consultations et de ce fait vous proposer lors d’une session Internet ultérieure des produits et des services correspondant à vos attentes. En réalité...

Écriture d’un cookie

La création d’un cookie se fera par l’intermédiaire d’une fonction JavaScript que nous allons créer (peu importe son nom) comme suit :

/* Définition de la fonction JavaScript de création d'un cookie */ 
function creationCookie(nomCookie, valeurCookie, expirationCookie, 
cheminCookie, domaineCookie, securiteCookie) 
{ 
    document.cookie = nomCookie + ' = ' + escape(valeurCookie) + ' ' + 
    ((expirationCookie == undefined) ? '' : ('; expires=' + 
    expirationCookie.toGMTString())) + ((cheminCookie == undefined) ? '' : 
    ('; path=' + cheminCookie)) + ((domaineCookie == undefined) ? '' : 
    ('; domain=' + domaineCookie)) + ((securiteCookie == true) ? '; 
    securiteCookie' : ''); 
} 
// La fonction escape réalise un encodage des caractères spéciaux en les  
// remplaçant par une séquence %remplacement où remplacement est un nombre 
// sous forme hexadécimale 
 
/* Création d'un cookie par appel de la fonction creationCookie */ 
var dateExpiration = new Date(); 
dateExpiration.setTime(dateExpiration.getTime() + 300 * 1000); 
// NB : - dateExpiration...

Lecture d’un cookie

Créons une fonction de nom lectureCookie pour lire le cookie monCookie vu dans la section précédente. La valeur souhaitée en retour par cette fonction sera la valeur du cookie, c’est-à-dire ’Editions ENI’.

Dans un premier temps notre fonction lit le contenu intégral du cookie. Ensuite la fonction lectureCookie isole l’élément souhaité (la valeur) pour la retourner.

Le code (partiel) du script est le suivant :

/* Définition de la fonction JavaScript de lecture d'un cookie */ 
function lectureCookie(nomCookie) 
{ 
    /* Test de présence du cookie */ 
    if (document.cookie.length == 0) 
    { 
        /* Valeur de retour null */ 
        return null; 
    } 
    else 
    { 
        /* Mise en tableau tabElements des éléments du cookie */ 
        /* NB : On se base sur le séparateur point-virgule */ 
        var tabElements = document.cookie.split(";"); 
        /* Recherche du = séparant le nom de l'élément 
        de la valeur de l'élément pour le 1er élément...

Suppression d’un cookie

La technique utilisée pour supprimer le fichier cookie est basique, il suffit de recréer le cookie (comme réalisé dans la fonction creationCookie) et de prévoir une date d’expiration antérieure à la date système (ajout d’un léger délai négatif par exemple).

Le code de la fonction suppressionCookie sera donc très proche de celui de la fonction creationCookie comme vous pouvez le voir ci-après :

/* Définition de la fonction JavaScript de suppression d'un cookie */ 
function suppressionCookie(nomCookie, valeurCookie, expirationCookie, 
cheminCookie, domaineCookie, securiteCookie) 
{ 
    document.cookie = nomCookie + ' = ' + escape(valeurCookie) + ' ' + 
    ((expirationCookie == undefined) ? '' : ('; expires=' + 
    expirationCookie.toGMTString())) + ((cheminCookie == undefined) ? '' : 
    ('; path=' + cheminCookie)) + ((domaineCookie == undefined) ? '' : 
    ('; domain=' + domaineCookie)) + ((securiteCookie == true) ? '; 
    securiteCookie' : ''); 
} 
// La fonction escape réalise un encodage des caractères spéciaux en les  
// remplaçant par une séquence %remplacement où...