Cookies : document.cookie

Les cookies sont de petits fragments de données (maximum ~4 Ko chacun) qu'un site stocke dans le navigateur et qui sont automatiquement attachés à chaque requête envoyée vers la même origine. Ce dernier point est ce qui les distingue des autres types de stockage côté client : les cookies voyagent jusqu'au serveur, ce qui en fait le mécanisme classique pour les identifiants de session, les tokens « se souvenir de moi », et les préférences de langue ou de thème que le serveur doit connaître. Ce guide explique comment lire, écrire et supprimer des cookies avec document.cookie, les attributs qui contrôlent leur portée et leur durée de vie, et quand il vaut mieux se tourner vers une autre option de stockage.

Comment fonctionne document.cookie

document.cookie est une propriété trompeusement simple. Sa lecture renvoie tous les cookies du document courant sous forme d'une seule chaîne de paires name=value séparées par des points-virgules. L'écriture définit un cookie à la fois — et, point crucial, une affectation ne remplace pas l'intégralité de la chaîne. Le navigateur analyse votre affectation et fusionne ce cookie unique dans l'ensemble existant :

// Reading: returns everything as one string
document.cookie; // "theme=dark; lang=en; sessionId=abc123"

// Writing: adds/updates ONE cookie, leaves the rest intact
document.cookie = "username=John";

Les attributs que vous ajoutez (path, expires, Secure, …) sont en écriture seule — ils configurent le cookie mais ne sont jamais retournés lorsque vous lisez document.cookie. Vous ne récupérez que des paires name=value.

Créer un cookie

Pour créer un cookie, affectez une chaîne name=value à document.cookie, suivie optionnellement d'attributs séparés par des ;. Si la valeur contient des espaces, des points-virgules ou d'autres caractères spéciaux, encodez-la avec encodeURIComponent pour éviter les problèmes d'analyse :

Ceci crée un cookie nommé username avec la valeur John Doe (encodée pour gérer l'espace), qui expire le 8 juin 2025, et accessible sur tout le site (path=/).

Attributs des cookies

Les attributs sont ajoutés à la chaîne d'affectation et contrôlent où le cookie est envoyé et combien de temps il vit. Les plus importants :

Sans expires ni max-age, vous obtenez un cookie de session qui disparaît à la fermeture du navigateur.

Définir une expiration

Utilisez expires pour une date absolue ou max-age pour une durée de vie relative en secondes. max-age est généralement plus simple car vous n'avez pas à formater une date :

Ce cookie userSettings expire 24 heures (86 400 secondes) après sa création.

Lire un cookie spécifique

Comme document.cookie renvoie tous les cookies en une seule chaîne, extraire une valeur précise nécessite de l'analyser. Un helper robuste préfixe la chaîne par ; afin que le même découpage fonctionne pour le premier cookie comme pour les autres :

Si vous devez parcourir tous les cookies, découpez sur ; et analysez chaque paire vous-même :

Supprimer un cookie

Il n'existe pas de commande « supprimer » — on supprime un cookie en le redéfinissant avec une expiration dans le passé (ou max-age=0). Le piège qui trompe tout le monde : vous devez utiliser le même path et le même domain que lors de la création du cookie, sinon le navigateur le considère comme un cookie différent et laisse l'original en place.

Définir expires=Thu, 01 Jan 1970 00:00:00 UTC produit le même effet pour les navigateurs qui préfèrent expires à max-age.

Sécuriser les cookies

Lorsqu'un cookie contient quelque chose de sensible (un token de session surtout), les attributs comptent autant que la valeur :

• Secure — envoie le cookie uniquement via HTTPS, afin qu'il ne puisse pas fuiter sur une connexion HTTP en clair.
• SameSite — contrôle si le cookie est joint aux requêtes cross-site. Lax (la valeur par défaut moderne) le bloque sur la plupart des requêtes cross-site, atténuant le CSRF ; Strict est le plus restrictif ; None (qui nécessite Secure) est destiné aux cas d'usage genuinement cross-site.
• HttpOnly — masque entièrement le cookie au JavaScript, protégeant les tokens de session contre le vol par XSS. Il ne peut pas être défini via document.cookie ; le serveur doit l'envoyer via l'en-tête de réponse Set-Cookie. C'est pourquoi les cookies de session sont généralement gérés côté serveur.

document.cookie = "sessionId=abc123; expires=Sat, 08 Jun 2025 12:00:00 UTC; path=/; Secure; SameSite=Lax";

Cookies vs. localStorage

Les cookies ne sont pas le seul stockage côté client, et pour la plupart des données, ils ne sont pas le meilleur choix. Utilisez les cookies uniquement quand le serveur a besoin des données à chaque requête :

Si vous avez juste besoin de mémoriser quelque chose côté client et que le serveur ne le lit jamais, localStorage ou sessionStorage est plus simple et plus spacieux ; l'API Storage le couvre en profondeur. Comme les cookies sont envoyés automatiquement avec les requêtes, ils interagissent aussi avec les règles CORS — voir les requêtes cross-origin avec Fetch pour envoyer des credentials entre origines.

Conclusion

Les cookies restent le moyen standard de partager de petits fragments d'état avec le serveur — sessions, authentification et préférences lues par le serveur. Écrivez-les un par un avec document.cookie, délimitez-les avec path/domain, contrôlez leur durée de vie avec expires/max-age, et sécurisez-les avec Secure, SameSite et (côté serveur) HttpOnly. Pour des données plus volumineuses et client-only, préférez le Web Storage.

Pratique