Les cookies en JavaScript

document.cookie : une propriété un peu spéciale

• En lecture, document.cookie renvoie tous les cookies accessibles, dans une seule chaîne : "theme=sombre; consentement=oui". Les attributs (durée, chemin…) ne sont pas visibles.
• En écriture, une affectation n'écrase pas tout : elle ajoute ou remplace un seul cookie, avec ses attributs.

document.cookie = "theme=sombre; max-age=31536000; path=/; SameSite=Lax";
document.cookie = "langue=fr; max-age=31536000; path=/; SameSite=Lax";

console.log(document.cookie); // "theme=sombre; langue=fr"

// Modifier : on réécrit le même nom (avec le même path)
document.cookie = "theme=clair; max-age=31536000; path=/; SameSite=Lax";

// Supprimer : durée de vie à 0
document.cookie = "langue=; max-age=0; path=/";

• Les caractères ;, ,, les espaces et les accents sont interdits dans la valeur : on les encode avec encodeURIComponent() et on les décode avec decodeURIComponent().

6. Les attributs d'un cookie

Attribut	Rôle	Conseil
max-age=3600	Durée de vie en secondes. Sans max-age ni expires, c'est un cookie de session, supprimé à la fermeture du navigateur.	Préférez max-age à expires (date au format UTC, plus pénible à écrire).
path=/	Pages du site concernées. Par défaut : le dossier de la page courante.	Mettez path=/ pour un cookie valable sur tout le site.
domain=centre.tn	Rend le cookie visible aussi sur les sous-domaines (cours.centre.tn).	À omettre dans la plupart des cas.
Secure	Le cookie n'est envoyé qu'en HTTPS.	Toujours en production.
SameSite=Lax	Contrôle l'envoi du cookie quand la requête vient d'un autre site: Strict (jamais), Lax (seulement en suivant un lien), None (toujours, avec Secure obligatoire).	Lax: protège contre les attaques CSRF. Chrome l'applique par défaut.
HttpOnly	Le cookie est invisible pour JavaScript: document.cookie ne le montre pas.	Ne peut être posé que par le serveur. Indispensable pour les sessions : une faille XSS ne pourra pas voler l'identifiant.

7. Une petite bibliothèque de fonctions

Manipuler directement la chaîne document.cookie est source d'erreurs. Voici quatre fonctions réutilisables, cookies.js:

// Petite bibliothèque pour lire et écrire des cookies

function ecrireCookie(nom, valeur, options = {}) {
  const {
    jours = 30,
    chemin = "/",
    sameSite = "Lax",
    secure = location.protocol === "https:",
  } = options;
  let cookie = `${encodeURIComponent(nom)}=${encodeURIComponent(valeur)}`;
  cookie += `; max-age=${jours * 24 * 60 * 60}`;
  cookie += `; path=${chemin}`;
  cookie += `; SameSite=${sameSite}`;
  if (secure) {
    cookie += "; Secure";
  }
  document.cookie = cookie; // ajoute ou remplace UN cookie, n'efface pas les autres
}

function lireCookie(nom) {
  const prefixe = `${encodeURIComponent(nom)}=`;
  const trouve = document.cookie.split("; ").find((morceau) => morceau.startsWith(prefixe));
  return trouve ? decodeURIComponent(trouve.slice(prefixe.length)) : null;
}

function supprimerCookie(nom, chemin = "/") {
  // même nom et même chemin, avec une durée de vie nulle
  document.cookie = `${encodeURIComponent(nom)}=; max-age=0; path=${chemin}`;
}

function tousLesCookies() {
  if (document.cookie === "") {
    return {};
  }
  return Object.fromEntries(
    document.cookie.split("; ").map((morceau) => {
      const position = morceau.indexOf("=");
      return [
        decodeURIComponent(morceau.slice(0, position)),
        decodeURIComponent(morceau.slice(position + 1)),
      ];
    }),
  );
}

• lireCookie() découpe la chaîne sur "; " et cherche le morceau qui commence exactement par nom= (pour ne pas confondre theme et theme2).
• Pour supprimer un cookie, il faut indiquer le même path qu'à sa création, sinon le navigateur considère qu'il s'agit d'un autre cookie.

Exemple complet : un bandeau de consentement

Cookies et loi

• En Europe, le RGPD et la directive ePrivacy imposent de demander l'accord de l'internaute avant de déposer des cookies qui ne sont pas strictement nécessaires (publicité, mesure d'audience non anonyme, réseaux sociaux). Les cookies indispensables (session, panier, mémorisation du choix de consentement) en sont dispensés.
• En Tunisie, la loi organique n° 2004-63 sur la protection des données personnelles, contrôlée par l'INPDP, impose elle aussi d'informer les personnes et de recueillir leur consentement.
• Bonnes pratiques : expliquer clairement à quoi sert chaque cookie, permettre de refuser aussi facilement que d'accepter, et redemander l'accord après quelques mois.

Actualités : cookies tiers et Cookie Store API

• Cookies tiers : Safari, Firefox et Brave les bloquent déjà par défaut. Google, qui prévoyait depuis 2019 de les supprimer de Chrome, a renoncé: le 22 avril 2025, il a confirmé que Chrome les garderait, l'utilisateur pouvant les bloquer dans ses paramètres de confidentialité, et les API qui devaient les remplacer (Privacy Sandbox) ont été retirées en octobre 2025. Ce choix ne change rien aux obligations de consentement, qui viennent de la loi et non du navigateur.
• Cookie Store API : une API moderne, asynchrone (avec des promesses), utilisable aussi dans les Service Workers. Elle est disponible dans tous les navigateurs récents (Baseline) depuis juin 2025 : Chrome 87, Safari 18.4 et Firefox 140. Comme les autres API récentes, elle exige un contexte sécurisé (HTTPS ou localhost).

// La même chose avec la Cookie Store API (asynchrone, HTTPS ou localhost)
await cookieStore.set({
  name: "theme",
  value: "sombre",
  expires: Date.now() + 365 * 24 * 60 * 60 * 1000, // en millisecondes
  sameSite: "lax",
});

const cookie = await cookieStore.get("theme"); // { name: "theme", value: "sombre", ... } ou null
console.log(cookie?.value);

await cookieStore.delete("theme");

// Être prévenu de chaque changement de cookie
cookieStore.addEventListener("change", (event) => {
  for (const modifie of event.changed) {
    console.log("modifié :", modifie.name, modifie.value);
  }
  for (const supprime of event.deleted) {
    console.log("supprimé :", supprime.name);
  }
});

• Plus besoin de découper une chaîne ni de calculer max-age: get(), set() et delete() font le travail, et l'événement change signale toute modification. Gardez document.cookie pour les navigateurs anciens.

Cookies ou autre chose ?

• Utilisez un cookie quand le serveur a besoin de la donnée à chaque requête : session, langue ou thème choisi pour générer la page dans le bon style dès son envoi.
• Pour des données qui ne servent qu'à JavaScript (une liste de tâches, un brouillon), préférez le localStorage: plus de place, une API plus simple, et rien n'est envoyé au serveur (leçon suivante).
• Ne stockez jamais de mot de passe ni de donnée sensible dans un cookie lisible par JavaScript.

Activités

À retenir

• Un cookie est un petit texte nom=valeur renvoyé au serveur à chaque requête.
• document.cookie = "nom=valeur; max-age=…; path=/; SameSite=Lax" ajoute ou remplace un cookie ; max-age=0 le supprime.
• Encodez les valeurs avec encodeURIComponent(); utilisez Secure et SameSite; les sessions sont en HttpOnly, posées par le serveur.
• Consentement obligatoire pour les cookies non indispensables ; la Cookie Store API (Baseline depuis 2025) modernise leur manipulation.

Sources : MDN Web Docs, web.dev, CNIL, INPDP.