OUJOOD.COM
Définition et Utilisation de la Propriété document.cookie
JavaScript cours tutorialLa propriété document.cookie en JavaScript DOM permet de définir ou de retourner toutes les paires nom/valeur des cookies HTTP associés au document actif. Cette propriété constitue l'interface principale pour la gestion des cookies côté client, offrant un contrôle complet sur le stockage persistant de données dans le navigateur de l'utilisateur.
Les cookies sont de petits fichiers texte stockés localement qui permettent de conserver des informations entre différentes sessions de navigation. Contrairement au localStorage ou sessionStorage, les cookies sont automatiquement envoyés au serveur avec chaque requête HTTP, ce qui les rend particulièrement adaptés pour la gestion d'authentification et de sessions utilisateur.
Support Navigateur et Compatibilité
La propriété document.cookie est universellement prise en charge par tous les navigateurs modernes ainsi que les versions historiques incluant Internet Explorer 3+, Firefox 1+, Chrome, Safari, Opera et Edge. Cette compatibilité étendue garantit un fonctionnement fiable sur l'ensemble de l'écosystème web.
Syntaxe de la Propriété document.cookie
document.cookie
La syntaxe de base pour accéder aux cookies JavaScript utilise simplement la propriété document.cookie. Pour la lecture, elle retourne une chaîne contenant tous les cookies sous forme de paires nom=valeur séparées par des points-virgules. Pour l'écriture, vous assignez une nouvelle chaîne contenant le cookie à créer ou modifier avec ses attributs optionnels (expires, path, domain, secure, samesite).
Exemple Pratique : Afficher les Cookies du Document Actif
Cet exemple démontre comment lire et afficher tous les cookies associés au document HTML courant. La fonction vérifie d'abord l'existence de cookies avant de les afficher à l'utilisateur via une interaction simple.
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Exemple lecture cookies JavaScript DOM</title> </head> <body> <p id="affichage-cookie">Cliquez sur le bouton pour afficher les cookies associés au document actif.</p> <button onclick="afficherCookies()">Afficher les cookies</button> <script> // Fonction pour afficher tous les cookies du document function afficherCookies() { // Vérification si des cookies existent if(document.cookie !== "") { // Affichage des cookies dans l'élément HTML document.getElementById("affichage-cookie").innerHTML = "Les cookies associés avec ce document sont : <strong>" + document.cookie + "</strong>"; } else { // Message si aucun cookie n'est présent document.getElementById("affichage-cookie").innerHTML = "Aucun cookie n'est associé avec ce document"; } } </script> </body> </html>
Les Trois Fonctions Essentielles pour Manipuler les Cookies
Pour implémenter une gestion complète des cookies JavaScript sur une page web, vous aurez besoin de trois fonctions fondamentales qui couvrent l'ensemble du cycle de vie d'un cookie :
- Fonction de lecture (getCookie) : permet de récupérer la valeur d'un cookie spécifique par son nom
- Fonction d'écriture (setCookie) : permet de créer ou modifier un cookie avec une valeur et une durée d'expiration
- Fonction de suppression (delCookie) : permet d'effacer un cookie existant en modifiant sa date d'expiration
Implémentation Complète des Fonctions de Gestion de Cookies
Voici une bibliothèque complète de fonctions JavaScript pour gérer efficacement les cookies. Ces fonctions utilisent les meilleures pratiques de manipulation de chaînes et de gestion des dates pour assurer une fiabilité maximale.
<script> // Fonction pour lire un cookie spécifique par son nom function getCookie(nomDuCookie) { // Vérification que la propriété document.cookie contient des données if (document.cookie.length > 0) { // Recherche de la position du nom du cookie dans la chaîne var debut = document.cookie.indexOf(nomDuCookie + "="); // Si le cookie existe (indexOf retourne -1 si non trouvé) if (debut !== -1) { // Calcul de la position de début de la valeur du cookie debut += nomDuCookie.length + 1; // Recherche du point-virgule marquant la fin du cookie var fin = document.cookie.indexOf(";", debut); // Si aucun point-virgule trouvé, c'est le dernier cookie if (fin === -1) fin = document.cookie.length; // Extraction et décodage de la valeur du cookie return decodeURIComponent(document.cookie.substring(debut, fin)); } } // Retourne null si le cookie n'existe pas return null; } // Fonction pour créer ou modifier un cookie avec durée d'expiration function setCookie(nomDuCookie, valeur, joursExpiration) { // Création d'un objet Date pour calculer la date d'expiration var dateExpiration = new Date(); // Calcul de la date d'expiration en millisecondes dateExpiration.setTime(dateExpiration.getTime() + (joursExpiration * 24 * 60 * 60 * 1000)); // Construction de la chaîne de cookie avec encodage de la valeur var cookieString = nomDuCookie + "=" + encodeURIComponent(valeur); // Ajout de la date d'expiration si spécifiée if (joursExpiration) { cookieString += "; expires=" + dateExpiration.toUTCString(); } // Ajout du path pour rendre le cookie accessible sur tout le site cookieString += "; path=/"; // Écriture du cookie dans document.cookie document.cookie = cookieString; } // Fonction pour supprimer un cookie existant function delCookie(nomDuCookie) { // Vérification que le cookie existe avant suppression if (getCookie(nomDuCookie)) { // Suppression en définissant une date d'expiration passée document.cookie = nomDuCookie + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/"; } } </script>
Exemple Avancé : Système Complet de Gestion de Cookies
Cet exemple illustre une application pratique complète utilisant les trois fonctions pour créer, lire et supprimer des cookies avec une interface utilisateur interactive.
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Système complet de gestion des cookies JavaScript</title> </head> <body> <h3>Gestion des Cookies JavaScript</h3> <p>Nom du cookie : <input type="text" id="nom-cookie" value="utilisateur"></p> <p>Valeur : <input type="text" id="valeur-cookie" value="Jean Dupont"></p> <p>Jours d'expiration : <input type="number" id="jours-expiration" value="7"></p> <button onclick="creerCookie()">Créer Cookie</button> <button onclick="lireCookie()">Lire Cookie</button> <button onclick="supprimerCookie()">Supprimer Cookie</button> <p id="resultat"></p> <script> // Fonction de création de cookie depuis l'interface function creerCookie() { var nom = document.getElementById("nom-cookie").value; var valeur = document.getElementById("valeur-cookie").value; var jours = parseInt(document.getElementById("jours-expiration").value); setCookie(nom, valeur, jours); document.getElementById("resultat").innerHTML = "<strong style='color:green'>Cookie créé avec succès !</strong>"; } // Fonction de lecture de cookie depuis l'interface function lireCookie() { var nom = document.getElementById("nom-cookie").value; var valeur = getCookie(nom); if(valeur) { document.getElementById("resultat").innerHTML = "Valeur du cookie <strong>" + nom + "</strong> : " + valeur; } else { document.getElementById("resultat").innerHTML = "<span style='color:red'>Cookie non trouvé</span>"; } } // Fonction de suppression de cookie depuis l'interface function supprimerCookie() { var nom = document.getElementById("nom-cookie").value; delCookie(nom); document.getElementById("resultat").innerHTML = "<strong style='color:orange'>Cookie supprimé</strong>"; } </script> </body> </html>
Attributs Avancés des Cookies HTTP
Les cookies JavaScript modernes supportent plusieurs attributs importants pour la sécurité et le contrôle :
- expires/max-age : définit la durée de vie du cookie
- path : spécifie le chemin URL où le cookie est accessible
- domain : définit le domaine autorisé à accéder au cookie
- secure : limite la transmission aux connexions HTTPS uniquement
- samesite : protection contre les attaques CSRF (Strict, Lax, None)
Pour plus de détails sur l'utilisation avancée et les bonnes pratiques de sécurité, consultez notre guide complet sur les cookies JavaScript.
Par carabde | Publié le 30 mars 2014 | Mis à jour le 5 février 2025