Introduction aux cookies : comprendre et utiliser les cookies JavaScript

Preslav Dobrev2022-10-25 · 8 min read

Introduction aux cookies : comprendre et utiliser les cookies JavaScript

Les cookies de navigateur, ou cookies HTTP, sont des fichiers texte composés de minuscules fragments de données. Les sites web utilisent ces informations pour suivre le parcours d’un utilisateur, ce qui leur permet de proposer des fonctionnalités sur mesure et d’améliorer leur expérience de navigation. Les cookies peuvent stocker jusqu’à 4096 octets de données. Cependant, nous pouvons ajouter un nombre limité de cookies par domaine, selon le navigateur.

Une compréhension de base des cookies HTTP est essentielle pour tout internaute, que vous naviguiez simplement pour le plaisir ou que vous en gagniez votre vie. Ce guide va vous présenter en détail les cookies et leurs différents types. Notre objectif est de vous aider à comprendre et à travailler avec les cookies JavaScript.

C’est parti !

Prérequis

Pour suivre ce tutoriel, vous devez disposer de :

Une compréhension de base de JavaScript.

Premiers pas avec les cookies JavaScript

Travailler avec les cookies JavaScript est simple. Cela permet de créer, modifier et récupérer des cookies sans effort. De plus, nous pouvons utiliser la propriété cookie de l’objet Document pour manipuler et restreindre les propriétés des cookies comme le nom, la valeur et la longueur, pour n’en citer que quelques-unes.

Types de cookies

Tout d’abord, jetons un coup d’œil aux différents types de cookies :

Cookies propriétaires

Ces cookies sont créés et stockés chaque fois qu’un utilisateur visite un site web. Ils permettent aux propriétaires de sites web d’obtenir un aperçu détaillé des données des utilisateurs et de leur offrir une meilleure expérience de navigation.

Cookies persistants

Pour ce type de cookie, l’émetteur attribue une date d’expiration. Par conséquent, il est utilisé pendant une période beaucoup plus longue. Cela signifie que même si vous fermez votre navigateur, le cookie y restera. De plus, les données sont renvoyées à l’émetteur chaque fois que vous visitez le site web qui a créé le cookie.

Cookies de session

Ces cookies ne sont que temporaires et seront stockés dans la mémoire de votre navigateur tant qu’il est ouvert. Lorsque vous le fermez, le cookie est supprimé de l’historique de votre navigateur, ce qui réduit les risques de sécurité. Vous n’avez pas besoin de spécifier de date d’expiration.

Cookies tiers

Les cookies tiers sont créés par un site que vous ne visitez pas actuellement. La plupart du temps, ces cookies sont utiles pour suivre un utilisateur qui a cliqué sur une publicité en l’associant au domaine qui l’a parrainé.

Création de cookies

Nous pouvons créer des cookies en utilisant deux méthodes :

Envoyer Set-Cookie dans l’en-tête de réponse HTTP. Selon les technologies utilisées pour le serveur web, vous pouvez gérer les en-têtes de cookies à l’aide d’outils et de bibliothèques. Les cookies peuvent contenir des informations telles qu’une date d’expiration et des fonctionnalités de sécurité comme la directive secure et le HttpOnly flag.

HttpOnly : Il indique que le navigateur ne peut pas lire ou modifier les cookies.
Secure : Cela indique que le cookie ne peut être envoyé que via HTTPS.

En utilisant la propriété JavaScript document.cookie, nous pouvons créer, lire et supprimer des cookies.

Étape 1 — Créer un cookie

Ensuite, nous allons faire la démonstration du processus de création d’un cookie JavaScript. Les cookies sont enregistrés au format de paire nom-valeur :

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

Dans le cookie ci-dessus, UserName est le nom du cookie tandis que CloudSigma est la valeur qui y est stockée.

Le cookie a une date d’expiration. Par défaut, il est supprimé automatiquement lors de la fermeture du navigateur. Vous pouvez également ajouter une date d’expiration à votre cookie :

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Par défaut, les cookies appartiennent à la page actuelle. Cependant, nous pouvons également spécifier le cookie à l’aide du paramètre path :

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs Cookie Expire

Selon vos besoins, vous pouvez utiliser ces deux stratégies pour définir la date d’expiration d’un cookie. La différence entre les deux est que expires définit une date d’expiration à laquelle un cookie est supprimé. Au contraire, le max-Age définit le délai en secondes après lequel un cookie sera supprimé. Malheureusement, max-age n'est pas pris en charge par tous les navigateurs.

Exemple de configuration d'un cookie à l'aide de expires et max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // en millisecondes
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // en millisecondes

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Étape 2 — Lire un cookie

L'attribut document.cookie retourne une chaîne de caractères. S'il y a deux cookies ou plus, nous utilisons un point-virgule ( ;) et un espace pour les séparer.

Nous utilisons la méthode split() pour extraire un cookie individuel d'une liste de cookies. Cette méthode divise la liste en paires de noms et de valeurs individuelles. Une fois cela fait, vous pouvez ensuite rechercher le cookie cible que vous souhaitez lire :

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Bon retour, " + UserName);
} else {
    firstName = prompt("Entrez votre nom d'utilisateur :");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Bon retour, " + UserName);

} else {

firstName = prompt("Entrez votre nom d'utilisateur :");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Comprenons les fonctions que nous avons créées dans le code :

Nom de la fonction	Description
setCookie()	Crée un cookie
getCookie()	Lit la valeur du cookie
checkCookie()	Vérifie si le UserName est défini ou non.

Dans l'étape suivante, nous apprendrons comment mettre à jour un cookie.

Étape 3 — Mettre à jour un cookie

Nous pouvons définir de nouvelles valeurs pour les attributs de notre cookie. Dans notre exemple, mettons à jour l'abonnement de l'utilisateur d'un forfait mensuel à un forfait trimestriel.

Mettons à jour l'attribut max-age du cookie UserName de 30 jours à 180 jours :

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Étape 4 — Supprimer un cookie

Renommer le cookie avec le même nom supprimera le cookie que vous souhaitez effacer. Nous pouvons supprimer un cookie en définissant l'attribut max-age à 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

De plus, si le cookie a un chemin spécifié, supprimez-le en le spécifiant :

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Conclusion

Les cookies sont nécessaires au bon fonctionnement d'un site web. Dans ce tutoriel d'introduction, nous avons examiné en détail les cookies et leurs différents types. De plus, nous avons appris à travailler avec les cookies à l'aide d'un exemple. Maintenant que vous êtes à l'aise avec l'utilisation des cookies JavaScript, commencez à créer des cookies personnalisés pour en apprendre davantage et explorer ce sujet.

De plus, il existe de nombreux tutoriels sur JavaScript et le développement web que vous pouvez explorer sur notre blog:

Bonne programmation !

Preslav Dobrev

Auteur · CloudSigma

Preslav Dobrev est un designer créatif chez CloudSigma, axé sur une identité commerciale cohérente à travers des canaux marketing traditionnels et innovants. Il excelle à fusionner la vision artistique avec le marketing stratégique pour créer des récits de marque percutants.