Comment gérer un cookie en JavaScript ?

Qu’est-ce qu’un cookie ?

Un cookie est un petit fichier qu’enregistre un site internet dans l’ordinateur d’un utilisateur. L’objectif est de conserver une information qui pourra être utilisée plus tard par ce même site ou un autre.

Il a une dure vie définie par le développeur, mais qui peut être écourtée par l’utilisateur grâce au fonctionnalités du navigateur web.

Prudence avec les cookies en JavaScript

Il tout à fait possible de créer, de conserver et de récupérer un cookie grâce au langage JavaScript. C’est ce que nous verrons ensuite. Cependant la gestion des cookies en JavaScript est justifiée seulement pour ceux qui sont inoffensifs. Pour les plus importants (sensibles pour les sites), mieux vaut les gérer côté serveur avec un langage adapté. Par exemple le PHP.

Création d’un cookie

Pour créer un cookie, nous pouvons utiliser la fonction ci-dessous.

function creerCookie(nom, contenu, jours) {
    var e = null;
    var date = new Date ();
    date. setTime (date.getTime() + (jours * 24 * 60 * 60 * 1000));
    e = "; expires=" + date. toGMTString();
    document. cookie = nom + "=" + contenu + e + "; path=/";
}

Pour l’utiliser, il faut l’appeler. Cette fonction possède trois paramètres. Dans l’ordre, le nom du cookie, son contenu (ou sa valeur) et sa durée de vie en jours.

// Ici on créer un cookie qui s’appellera 'TestCookie' qui à comme valeur 'Je suis un cookie' et qui à une durée de vie de 10 jours
creerCookie ('TestCookie', 'Je suis un cookie', 10);

Récupérer un cookie en JavaScript

On utilisera une autre fonction pour récupérer un cookie.

function recupererCookie (nom) {
    nom = nom + "=";
    var liste = document. cookie. split (';');
    for (var i = 0; i < liste.length; i++) {
        var c = liste[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nom) == 0) return c.substring(nom.length, c.length);
    }
    return null;
}

L’utilisation de cette fonction est très simple et elle ne comporte qu’un paramètre, le nom du cookie. Elle renvoie le contenu si celui-ci existe. Dans le cas contraire la fonction renvoie null

// Affiche dans la console 'Je suis un cookie'
console.log (recupererCookie ('TestCookie'));

// Affiche dans la console null car le cookie n’a préalablement pas été crée
console.log (recupererCookie ('TestCook'));