Guide complet des cookies en JavaScript

Cookies en JavaScript

Les cookies sont de petits éléments de données stockés sur le navigateur de l'utilisateur par un site Web. Ils sont couramment utilisés pour stocker les préférences des utilisateurs, suivre les sessions ou maintenir l'état entre les requêtes.

JavaScript fournit des méthodes simples pour créer, lire et supprimer des cookies, ce qui en fait un outil essentiel pour le stockage et la gestion de session côté client.

1. Configuration des cookies

Les cookies sont créés en attribuant une chaîne à document.cookie.

Syntaxe :

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

• key=value : Paire clé-valeur du cookie.
• expire : Date d'expiration (facultatif). S'il n'est pas défini, le cookie est un cookie de session et est supprimé à la fermeture du navigateur.
• chemin : Chemin au sein du site où le cookie est accessible (par défaut : chemin actuel).
• domaine : Domaine où le cookie est accessible (par défaut : domaine actuel).
• sécurisé : le cookie est envoyé uniquement via HTTPS.
• SameSite : contrôle le comportement entre sites (Strict, Lax ou Aucun).

Exemple :

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

2. Lecture des cookies

La propriété document.cookie renvoie tous les cookies du domaine et du chemin actuels sous la forme d'une seule chaîne.

Exemple :

console.log(document.cookie);
// Output: "username=JohnDoe; theme=dark; sessionId=abc123"

Pour extraire des cookies spécifiques, analysez la chaîne :

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookie("username")); // Output: JohnDoe

3. Mise à jour des cookies

Pour mettre à jour un cookie, configurez-le à nouveau avec la même clé mais une valeur ou des options différentes.

Exemple :

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
console.log(document.cookie); // Output: "username=JaneDoe; ..."

4. Suppression des cookies

Pour supprimer un cookie, définissez sa date d'expiration sur une date passée.

Exemple :

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

5. Gestion des caractères spéciaux

Les caractères spéciaux dans les valeurs des cookies doivent être codés à l'aide de encodeURIComponent et décodés avec decodeURIComponent.

Exemple :

document.cookie = "userInfo=" + encodeURIComponent("John Doe & Admin");
console.log(decodeURIComponent(getCookie("userInfo"))); // Output: John Doe & Admin

6. Considérations de sécurité

1. Drapeau sécurisé :
   • Utilisez Secure pour garantir que les cookies sont transmis uniquement via HTTPS.

   document.cookie = "sessionId=abc123; secure";

1. Cookies HTTP uniquement :

   • Non accessible via JavaScript (défini côté serveur).

2. Attribut SameSite :

   • Contrôle le comportement des cookies entre sites pour empêcher les attaques CSRF.

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

7. Résumé des attributs des cookies

8. Gérer les cookies avec JavaScript

Pour faciliter la gestion des cookies, encapsulez les opérations courantes dans des fonctions utilitaires.

Exemple :

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

9. Résumé

Les cookies sont un outil fondamental pour maintenir l'état des applications Web. Une manipulation appropriée garantit la fonctionnalité tout en protégeant les données des utilisateurs.

• Utilisez Secure et SameSite pour des cookies plus sûrs.
• Évitez de stocker des informations sensibles directement dans les cookies.
• Utilisez les utilitaires JavaScript pour simplifier la gestion des cookies.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!