JavaScript et Cookies

Bonjour là-bas, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage délicieux dans le monde des cookies. Non, pas celui que vous trempez dans le lait (bien que je ne serais pas contre un de ceux-là right now), mais le genre numérique qui rend nos expériences web plus fluides et plus personnalisées. Alors, enfilez votre tablier virtuel, et c'est parti pour la cuisson... je veux dire, le codage !

Qu'est-ce que les Cookies ?

Les cookies sont de petites pieces de données stockées sur l'ordinateur d'un utilisateur par les sites web qu'ils visitent. Pensez à eux comme de petites notes digitales que les sites collent sur votre ordinateur pour se souvenir de choses à propos de vous. Ces "notes" peuvent contenir diverses informations, comme vos préférences, vos informations de connexion ou les articles dans votre panier.

Quand j'ai appris pour la première fois ce que sont les cookies, j'ai imaginé de petits elfes informatiques écrivant des notes et les fourrant dans mon PC. Bien que ce ne soit pas exactement ainsi que cela fonctionne, c'est une bonne manière de visualiser le concept !

Pourquoi les Cookies sont-ils nécessaires ?

Vous vous demandez peut-être, "Pourquoi les sites web ne peuvent-ils pas se souvenir de choses sans ces trucs de cookies ?" Eh bien, laissez-moi vous raconter une petite histoire.

Imaginez que vous êtes dans un café animé. Vous commandez un café et un sandwich, mais ensuite vous devez utiliser les toilettes. Quand vous revenez, comment le barista sait-il哪个订单是你的 dans la mer de clients ? C'est là que les cookies deviennent utiles dans le monde numérique.

Les cookies sont nécessaires pour plusieurs raisons :

1. Se souvenir des préférences des utilisateurs
2. Garder les utilisateurs connectés
3. Suivre les articles dans les paniers d'achat
4. Personnaliser les expériences des utilisateurs
5. Analyser le comportement des utilisateurs pour améliorer

Sans cookies, chaque fois que vous visitez un site web, c'est comme si vous le rencontraient pour la première fois - pas de mémoire de vos préférences, pas de connexion sauvegardée, pas d'articles dans votre panier. Pas très pratique, n'est-ce pas ?

Comment Ça Marche ?

Maintenant, penchons-nous sous le capot et voyons comment ces cookies numériques fonctionnent réellement. Ne vous inquiétez pas ; ce n'est pas aussi compliqué que cela pourrait sembler !

Lorsque vous visitez un site web, il peut envoyer un cookie à votre navigateur. Votre navigateur stocke alors ce cookie sur votre ordinateur. La prochaine fois que vous visitez le même site, votre navigateur renvoie le cookie au site. C'est comme un poing secret entre votre ordinateur et le site.

Voici un diagramme simple pour illustrer cela :

L'utilisateur visite le site
↓
Le site envoie un cookie
↓
Le navigateur stocke le cookie
↓
L'utilisateur revisite le site
↓
Le navigateur envoie le cookie
↓
Le site reconnaît l'utilisateur

Maintenant que nous comprenons les bases, mettons-nous au travail et commencer à utiliser les cookies en JavaScript !

Définir/Stocker des Cookies

Définir un cookie, c'est comme laisser une note pour plus tard. En JavaScript, nous utilisons la propriété document.cookie pour créer un cookie. Voici comment vous pouvez le faire :

document.cookie = "username=John Doe";

Décomposons cela :

• document.cookie est la propriété que nous utilisons pour interagir avec les cookies.
• "username=John Doe" est le cookie réel. C'est une paire clé-valeur, où username est la clé et John Doe est la valeur.

Vous pouvez également définir plusieurs cookies :

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

Chaque déclaration document.cookie crée un nouveau cookie. Il ne remplace pas les existants.

Lire les Cookies

Lire les cookies, c'est comme fouiller à travers les notes que vous avez laissées pour vous-même. Voici comment vous pouvez lire les cookies :

let allCookies = document.cookie;
console.log(allCookies);

Cela vous donnera tous les cookies en une longue chaîne. Mais habituellement, vous voulez obtenir la valeur d'un cookie spécifique. Voici une fonction pour cela :

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// Utilisation
let username = getCookie("username");
console.log(username); // Affiche : John Doe

Cette fonction_divise la chaîne de cookies, boucle à travers chaque cookie, et retourne la valeur si elle trouve une correspondance.

Définir une Date d'Expiration pour les Cookies

Les cookies sont comme du lait - ils peuvent tourner si on les laisse trop longtemps. Par défaut, les cookies expirent lorsque la session du navigateur se termine. Mais vous pouvez définir une date d'expiration spécifique :

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

Ce cookie expirera dans un mois. L'attribut expires indique au navigateur quand supprimer le cookie.

Supprimer un Cookie

Parfois, vous devez jeter un cookie. Pour supprimer un cookie, vous définissez sa date d'expiration à une date passée :

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

Cela définit la valeur du cookie à vide et sa date d'expiration à une heure passée, ce qui le supprime effectivement.

Mettre à Jour les Cookies

Mettre à jour un cookie est aussi simple que de le définir à nouveau avec une nouvelle valeur :

document.cookie = "username=Jane Doe";

Si un cookie avec le nom "username" existe déjà, cela met à jour sa valeur. Si ce n'est pas le cas, il crée un nouveau cookie.

Tableau des Méthodes de Cookies

Voici un tableau pratique résumant les méthodes que nous avons apprises :

Action	Méthode
Définir un Cookie	document.cookie = "key=value";
Lire tous les Cookies	let allCookies = document.cookie;
Lire un Cookie Spécifique	Utiliser la fonction getCookie()
Définir une Date d'Expiration	document.cookie = "key=value; expires=date";
Supprimer un Cookie	Définir l'expiration à une date passée
Mettre à Jour un Cookie	Définir le cookie à nouveau avec une nouvelle valeur

Et voilà, les amis ! Vous êtes maintenant équipés des connaissances pour travailler avec les cookies en JavaScript. Souvenez-vous, avec un grand pouvoir vient une grande responsabilité. Respectez toujours la vie privée des utilisateurs et soyez transparents sur votre utilisation des cookies.

La prochaine fois que vous naviguez sur le web et qu'un site se souvient de vos préférences, vous pouvez sourire en connaissance de cause et penser, "Ah, les cookies à l'œuvre !" Bon codage, et puissent vos cookies numériques toujours être frais et vos véritables cookies toujours être délicieux !

Credits: Image by storyset