Guide Complet : Créer des Cookies JavaScript en 2025 avec Exemples Pratiques

Dans le monde du développement web moderne, les cookies JavaScript restent un élément fondamental pour stocker des informations côté client. En 2025, leur utilisation a évolué pour s'adapter aux nouvelles réglementations de confidentialité et aux pratiques de développement. Ce guide vous présente les méthodes actuelles pour créer, gérer et sécuriser efficacement les cookies dans vos applications web.

Qu'est-ce qu'un cookie JavaScript et pourquoi l'utiliser en 2025 ?

Un cookie est un petit fichier texte stocké par le navigateur sur l'appareil de l'utilisateur. Il permet de conserver des informations entre les différentes sessions de navigation. Malgré l'émergence d'alternatives comme localStorage et sessionStorage, les cookies conservent des avantages uniques :

• Transmission automatique au serveur avec chaque requête HTTP
• Possibilité de définir une date d'expiration précise
• Options de sécurité avancées (HttpOnly, SameSite, Secure)
• Support universel sur tous les navigateurs

Syntaxe de base pour créer un cookie en JavaScript

La création d'un cookie en JavaScript utilise la propriété document.cookie. Voici la syntaxe fondamentale :

document.cookie = "nom=valeur; expires=date; path=chemin; domain=domaine; secure; samesite=strict";

Chaque paramètre a une fonction spécifique :

Créer un cookie avec une date d'expiration

L'un des aspects les plus importants lors de la création d'un cookie est la définition de sa durée de vie. Voici comment créer un cookie qui expire dans 7 jours :

function setCookieWithExpiry(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  document.cookie = name + "=" + value + "; " + expires + "; path=/; SameSite=Strict";
}

// Exemple d'utilisation
setCookieWithExpiry("utilisateur_id", "12345", 7);

Cette approche est particulièrement utile pour les cookies de session prolongée, comme les préférences utilisateur ou les identifiants de connexion persistants. Pour une gestion complète des cookies JavaScript, il est recommandé de créer des fonctions dédiées pour chaque opération.

Lire un cookie en JavaScript

La lecture d'un cookie nécessite de parser la chaîne de caractères retournée par document.cookie :

function getCookie(name) {
  const cookieName = name + "=";
  const cookies = document.cookie.split(';');
  
  for(let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if (cookie.indexOf(cookieName) === 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

// Exemple d'utilisation
const userId = getCookie("utilisateur_id");
console.log(userId); // Affiche 12345

Cette fonction recherche un cookie spécifique par son nom et retourne sa valeur. Si le cookie n'existe pas, elle retourne une chaîne vide. Cette méthode de lecture est essentielle pour implémenter des fonctionnalités personnalisées basées sur les préférences utilisateur.

Supprimer un cookie en JavaScript

Pour supprimer un cookie, définissez simplement sa date d'expiration dans le passé :

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// Exemple d'utilisation
deleteCookie("utilisateur_id");

Cette technique est particulièrement utile lors de la déconnexion d'un utilisateur ou lorsque vous souhaitez réinitialiser certaines préférences. La suppression des cookies fait partie intégrante d'une bonne stratégie de gestion des données utilisateur.

Bonnes pratiques de sécurité pour les cookies en 2025

En 2025, la sécurité des cookies est plus importante que jamais. Voici les pratiques essentielles à adopter :

1. Utiliser l'attribut SameSite

L'attribut SameSite protège contre les attaques CSRF (Cross-Site Request Forgery) en contrôlant quand les cookies sont envoyés avec les requêtes cross-origin :

document.cookie = "id=a3fWa; SameSite=Strict; Secure";

Les trois valeurs possibles sont :

• Strict : Le cookie n'est envoyé que si le site dans la barre d'URL correspond au site du cookie
• Lax : Le cookie est envoyé lors de la navigation vers le site d'origine et avec certaines requêtes GET
• None : Le cookie est envoyé dans tous les contextes (nécessite l'attribut Secure)

2. Utiliser l'attribut Secure

L'attribut Secure garantit que le cookie n'est transmis que via HTTPS :

document.cookie = "session_id=abc123; Secure; SameSite=Strict";

Cette pratique est essentielle pour protéger les informations sensibles comme les jetons d'authentification. Pour une sécurité optimale des applications web, combinez cette approche avec d'autres stratégies de protection des données.

3. Limiter la portée des cookies

Restreignez la portée des cookies en utilisant les attributs path et domain :

document.cookie = "preferences=dark_mode; path=/dashboard; domain=example.com";

Cette approche limite l'accès au cookie à des sections spécifiques de votre site, réduisant ainsi les risques de sécurité.

Créer une bibliothèque de gestion des cookies

Pour simplifier la gestion des cookies dans vos projets, créez une bibliothèque réutilisable :

const CookieManager = {
  set: function(name, value, days, options = {}) {
    let cookie = `${name}=${encodeURIComponent(value)}`;
    
    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      cookie += `; expires=${date.toUTCString()}`;
    }
    
    cookie += `; path=${options.path || '/'}`;
    
    if (options.domain) cookie += `; domain=${options.domain}`;
    if (options.secure || options.sameSite === 'None') cookie += `; secure`;
    if (options.sameSite) cookie += `; samesite=${options.sameSite}`;
    
    document.cookie = cookie;
  },
  
  get: function(name) {
    const nameEQ = `${name}=`;
    const cookies = document.cookie.split(';');
    
    for (let i = 0; i < cookies.length; i++) {
      let cookie = cookies[i].trim();
      if (cookie.indexOf(nameEQ) === 0) {
        return decodeURIComponent(cookie.substring(nameEQ.length));
      }
    }
    return null;
  },
  
  delete: function(name, options = {}) {
    this.set(name, '', -1, options);
  }
};

// Exemples d'utilisation
CookieManager.set('theme', 'dark', 30, { sameSite: 'Strict' });
const theme = CookieManager.get('theme');
CookieManager.delete('session_id');

Cette bibliothèque offre une interface simple et cohérente pour toutes les opérations liées aux cookies, tout en intégrant les meilleures pratiques de sécurité. Pour des fonctionnalités plus avancées, vous pourriez envisager d'utiliser des bibliothèques dédiées à la gestion des cookies.

Conformité RGPD et cookies en 2025

En 2025, la conformité au RGPD reste essentielle pour les sites européens. Voici comment gérer le consentement aux cookies :

1. Afficher une bannière de consentement claire avant de définir des cookies non essentiels
2. Permettre aux utilisateurs de refuser facilement les cookies non essentiels
3. Documenter et stocker le consentement de l'utilisateur
4. Fournir un moyen simple de retirer le consentement

Voici un exemple de mise en œuvre du consentement :

// Vérifier si l'utilisateur a déjà donné son consentement
const hasConsent = CookieManager.get('cookie_consent');

if (!hasConsent) {
  // Afficher la bannière de consentement
  showConsentBanner();
}

function acceptCookies() {
  // Enregistrer le consentement (1 an)
  CookieManager.set('cookie_consent', 'true', 365, { sameSite: 'Strict' });
  // Initialiser les cookies non essentiels
  initializeAnalyticsCookies();
  // Masquer la bannière
  hideConsentBanner();
}

function rejectCookies() {
  // Enregistrer le refus
  CookieManager.set('cookie_consent', 'false', 365, { sameSite: 'Strict' });
  // Masquer la bannière
  hideConsentBanner();
}

Pour une gestion approfondie de la conformité RGPD, envisagez d'utiliser des solutions spécialisées qui automatisent ces processus.

Alternatives aux cookies en 2025

Bien que les cookies restent essentiels, d'autres technologies de stockage client sont disponibles :

• localStorage : Stockage persistant sans date d'expiration (5-10 Mo)
• sessionStorage : Stockage limité à la session du navigateur
• IndexedDB : Base de données côté client pour de grandes quantités de données structurées
• Web Storage API : Interface moderne pour localStorage et sessionStorage

Chaque technologie a ses avantages et inconvénients. Le choix dépend de vos besoins spécifiques en matière de persistance, de taille et d'accessibilité des données.

Conclusion

En 2025, les cookies JavaScript restent un outil fondamental pour le développement web, malgré l'émergence d'alternatives. En suivant les bonnes pratiques de création, de gestion et de sécurisation des cookies présentées dans ce guide, vous pourrez implémenter efficacement cette technologie dans vos projets tout en respectant les exigences de confidentialité et de sécurité actuelles.

Pour aller plus loin dans l'automatisation de vos tâches de développement, Roboto propose des outils intelligents qui peuvent vous aider à générer et optimiser votre code JavaScript, y compris la gestion des cookies. Inscrivez-vous gratuitement à Roboto pour découvrir comment l'IA peut transformer votre façon de coder et d'implémenter des fonctionnalités web avancées.