Comment Utiliser les Cookies en JavaScript : Créer, Lire et Supprimer

Vous voulez savoir comment garder une information d’une page à l’autre sur votre site ? Vous cherchez comment créer, lire ou effacer un cookie en JavaScript sans vous prendre la tête ? C’est une compétence de base pour tout développeur web.

Cet article vous donne les fonctions JavaScript claires et prêtes à copier-coller pour créer, lire et supprimer des cookies facilement. On va droit au but, avec des exemples concrets pour chaque étape.

Qu’est-ce qu’un cookie en JavaScript ?

Pour faire simple, un cookie est un petit fichier texte que votre site web demande au navigateur de l’utilisateur de stocker. Son but principal est de se souvenir d’informations sur cet utilisateur entre ses différentes visites ou entre plusieurs pages.

Pensez-y comme un ticket de vestiaire. Vous donnez votre manteau (une information), on vous donne un ticket (le cookie). Quand vous revenez, vous présentez le ticket et on vous rend votre manteau. Les cookies fonctionnent sur ce principe, mais pour des données numériques, et sont définis par la spécification RFC 6265.

En JavaScript, on interagit avec les cookies via une seule propriété : document.cookie. Ça peut paraître simple, mais cette propriété a un fonctionnement un peu particulier. Elle se comporte comme une chaîne de caractères qui contient tous les cookies du site, séparés par un point-virgule, sous la forme `nom=valeur`. Pour en savoir plus, la documentation complète sur MDN est la référence.

Comment créer et modifier un cookie en JavaScript (Fonction setCookie)

Pour créer un cookie, il n’y a pas de méthode directe comme `document.cookie.add()`. On doit assigner une chaîne de caractères à `document.cookie`. Cette chaîne doit contenir le nom, la valeur et d’éventuelles options comme la date d’expiration.

Le plus simple est d’utiliser une fonction pour gérer ça proprement. Voici une fonction setCookie complète et réutilisable qui permet de définir un cookie.

function setCookie(name, value, days) {
    // On prépare la date d'expiration
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    // On encode la valeur pour éviter les problèmes avec les caractères spéciaux
    const encodedValue = encodeURIComponent(value);
    // On crée le cookie
    document.cookie = name + "=" + encodedValue + expires + "; path=/";
}

Comment fonctionne ce code ?

• `name` et `value` : Ce sont le nom et la valeur de l’information que vous voulez stocker. Par exemple, `name` pourrait être « username » et `value` « JohnDoe ».
• `days` : C’est la durée de vie du cookie en jours. Si vous ne mettez rien, le cookie sera un « cookie de session » et disparaîtra à la fermeture du navigateur.
• `new Date()` : Ce code crée un objet `date` qui représente le moment présent. On lui ajoute ensuite le nombre de jours souhaité pour calculer la date d’expiration.
• `toUTCString()` : Cette méthode convertit la date dans un format standard que les navigateurs comprennent pour les cookies.
• `encodeURIComponent()` : C’est une étape importante. Cette fonction sécurise la valeur du cookie en encodant les caractères spéciaux (comme les espaces, `&`, `;`…). Sans ça, votre cookie pourrait être corrompu ou illisible.
• `document.cookie = …` : C’est la ligne qui assemble tout et qui demande au navigateur de créer le cookie. Le `path=/` à la fin indique que le cookie est accessible sur tout le site.

Comment lire la valeur d’un cookie (Fonction getCookie)

Lire un cookie est un peu plus complexe que d’en créer un. Quand vous lisez `document.cookie`, le navigateur vous renvoie tous les cookies de votre site en une seule chaîne, comme ça : `cookie1=valeur1; cookie2=valeur2; …`.

Il faut donc chercher dans cette chaîne le cookie qui nous intéresse. Encore une fois, une fonction dédiée simplifie grandement la tâche. Voici la fonction getCookie pour récupérer la valeur d’un cookie par son nom.

function getCookie(name) {
    const nameEQ = name + "=";
    // On récupère tous les cookies et on les sépare dans un tableau
    const ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        // On supprime les espaces au début
        while (c.charAt(0) === ' ') {
            c = c.substring(1, c.length);
        }
        // Si on trouve le cookie, on retourne sa valeur
        if (c.indexOf(nameEQ) === 0) {
            const value = c.substring(nameEQ.length, c.length);
            // On décode la valeur qui a été encodée à la création
            return decodeURIComponent(value);
        }
    }
    // Si le cookie n'est pas trouvé, on retourne null
    return null;
}

Explication de la fonction `getCookie`

Le code peut sembler un peu dense, mais la logique est simple :

1. `document.cookie.split(‘;’)` : Cette commande prend la longue chaîne de tous les cookies et la coupe en morceaux à chaque point-virgule. On obtient un tableau où chaque élément est un cookie (`nom=valeur`).
2. La boucle `for` : On parcourt chaque élément de ce tableau pour trouver celui qui nous intéresse.
3. `c.trim()` (ou la boucle `while`) : C’est pour nettoyer les espaces qui peuvent traîner avant le nom du cookie.
4. `c.indexOf(nameEQ) === 0` : On vérifie si la chaîne du cookie commence bien par le nom que l’on cherche (suivi de `=`).
5. `c.substring(…)` : Si on a trouvé le bon cookie, on extrait uniquement la partie qui correspond à la valeur.
6. `decodeURIComponent()` : C’est l’opération inverse de `encodeURIComponent()`. Elle restitue les caractères spéciaux à leur forme originale pour qu’on puisse utiliser la valeur.

Comment supprimer un cookie en JavaScript

C’est souvent une surprise pour les débutants, mais il n’existe pas de méthode directe comme `removeCookie()` ou `deleteCookie()` en JavaScript. La technique pour supprimer un cookie est une astuce.

Pour supprimer un cookie, il faut en fait le recréer avec une date d’expiration passée. Le navigateur, en voyant que le cookie a expiré, le supprime automatiquement. On peut aussi lui donner une valeur vide par précaution.

La bonne nouvelle, c’est qu’on peut réutiliser notre fonction `setCookie` pour faire ça. Il suffit de lui passer un nombre de jours négatif.

// Pour supprimer le cookie 'user_preference', on fait :
setCookie('user_preference', '', -1);

Pourquoi cette méthode fonctionne ?

• En appelant `setCookie(‘user_preference’,  », -1)`, vous dites au navigateur :
• « Redéfinis le cookie nommé `user_preference`. »
• « Donne-lui une valeur vide (` »`). »
• « Fais-le expirer hier (`-1` jour). »

Le navigateur exécute l’ordre, voit que la date d’expiration est dans le passé et supprime immédiatement le cookie. C’est simple et efficace.

Les options avancées des cookies : Le guide complet

Au-delà du nom, de la valeur et de l’expiration, on peut contrôler plus finement le comportement d’un cookie avec des options supplémentaires. Ces options s’ajoutent à la chaîne de caractères lors de la création du cookie, séparées par des points-virgules.

Voici les options les plus importantes pour manipuler les cookies de manière précise et sécurisée.

Quelques précisions sur les options de sécurité

L’attribut `Secure`

Utiliser l’attribut `secure` est une pratique fortement recommandée. Il garantit que les informations du cookie ne transitent jamais en clair sur le réseau, ce qui empêche leur interception sur des réseaux non sécurisés comme les Wi-Fi publics.

L’attribut `HttpOnly`

Il existe une autre option de sécurité très importante : `HttpOnly`. Cependant, cette option ne peut pas être définie en JavaScript. Elle doit être ajoutée par le serveur dans l’en-tête de la réponse HTTP. L’option `HttpOnly` interdit à JavaScript d’accéder au cookie. C’est une protection très efficace contre les attaques XSS (Cross-Site Scripting), car un script malveillant ne pourra pas voler le cookie.

L’attribut `SameSite`

L’option `samesite` est devenue cruciale pour la sécurité web. Elle empêche le navigateur d’envoyer le cookie avec des requêtes initiées depuis un autre site.

• samesite=Strict : Le cookie n’est envoyé que si la requête provient du même site. C’est le plus sûr.
• samesite=Lax : Un compromis. Le cookie est envoyé lors de la navigation (clic sur un lien), mais pas pour les requêtes de type POST ou avec des iframes. C’est le défaut dans la plupart des navigateurs modernes.
• samesite=None : Le cookie est envoyé avec toutes les requêtes. Nécessite l’attribut `secure` pour fonctionner.

Cookies vs Local Storage vs Session Storage : Lequel choisir ?

Les cookies ne sont pas le seul moyen de stocker des données dans le navigateur. JavaScript propose deux autres mécanismes via l’API Web Storage : `localStorage` et `sessionStorage`. Il est important de comprendre leurs différences pour choisir le bon outil.

Le principal avantage des cookies est qu’ils sont envoyés automatiquement avec chaque requête HTTP vers le serveur. C’est utile pour la gestion des sessions et l’authentification, mais cela alourdit aussi les requêtes.

Voici un tableau comparatif pour y voir plus clair.

Quand utiliser quoi ?

• Utilisez les cookies pour : stocker des informations qui doivent être lues par le serveur, comme un identifiant de session pour l’authentification. C’est leur rôle historique.
• Utilisez le `localStorage` pour : sauvegarder des préférences utilisateur qui doivent persister même après la fermeture du navigateur (ex: un thème sombre, le contenu d’un panier non validé).
• Utilisez le `sessionStorage` pour : stocker des données temporaires liées à une session de navigation dans un seul onglet (ex: des données de formulaire saisies sur plusieurs pages).

FAQ – Utilisation des Cookies en JavaScript

Quelle est la taille maximale d’un cookie ?

La taille maximale d’un cookie est d’environ 4 Ko (4096 octets). Cette limite inclut le nom, la valeur et les attributs du cookie. De plus, un domaine est généralement limité à une vingtaine de cookies. Il faut donc les utiliser avec parcimonie pour stocker de petites quantités de données.

Comment voir les cookies dans Chrome ou Firefox ?

C’est très simple. Vous pouvez utiliser les outils de développement de votre navigateur :

1. Appuyez sur F12 (ou clic droit > Inspecter).
2. Allez dans l’onglet « Application » (sur Chrome) ou « Stockage » (sur Firefox).
3. Dans le menu de gauche, cherchez la section « Cookies » et cliquez sur le nom de votre site. Vous verrez la liste de tous les cookies, avec leur nom, valeur, date d’expiration, etc.

Les cookies sont-ils dangereux ?

Les cookies en eux-mêmes ne sont pas des programmes, ils ne peuvent donc pas exécuter de code. Le risque vient de la manière dont les informations stockées sont utilisées, notamment pour le suivi des utilisateurs à des fins publicitaires (cookies tiers). Le RGPD en Europe impose d’obtenir le consentement de l’utilisateur avant de déposer des cookies non essentiels.

Pourquoi utiliser encodeURIComponent ?

La valeur d’un cookie ne doit pas contenir certains caractères comme des points-virgules, des virgules ou des espaces, car ils ont une signification spéciale. La fonction `encodeURIComponent` transforme ces caractères en un format sûr (par exemple, un espace devient `%20`). Cela garantit que la valeur de votre cookie est stockée et lue correctement, sans être coupée ou mal interprétée.