Formation JS | Manipuler les Cookies

Qu’est-ce qu’un cookie ?

Avant de rentrer dans le détail de la manipulation des cookies en JavaScript, il est important de comprendre ce qu’est un cookie, et quel rôle il joue sur un site web.

Manipuler les cookies en JavaScript

Les cookies sont enregistrés dans des paires nom-valeur comme : user=Athios (à la manière des objets littéraux JS).

On peut très facilement manipuler les cookies en JavaScript avec la propriété document.cookie.

Création

On créé un cookie avec la propriété .cookie à laquelle on affecte un couple nom-valeur défini au sein d’une chaîne de caractères.

// Création du cookie "user" avec pour valeur "Athios"
document.cookie = "user=Athios";

En plus d’une paire nom=valeur, on va également pouvoir définir des options pour nos cookies.

Portée

Les directives domain et path définissent la portée d’un cookie ; autrement dit sur quelles URLs les cookies doivent être accessibles.

Domaine d’accessibilité

L’option domain permet de préciser le(s) domaine(s) sur le(s)quel(s) le cookie doit être accessible.

Si vous ne précisez pas l’option domain lors de la création d’un cookie en JavaScript, le cookie sera accessible uniquement depuis le domaine (ou sous-domaine exact) de l’URL de la page en cours.

Les cookies créés sans spécification de domaine sont appelés cookies de domaine restreint.

Par exemple, si vous créez un cookie sur monsite.com sans spécifier de domain, ce cookie sera uniquement accessible lorsque l’utilisateur navigue sur des pages du domaine monsite.com (par exemple monsite.com/blog, monsite.com/shop, etc.). Le cookie ne sera pas accessible depuis un sous-domaine comme sous-domaine.monsite.com (tels que blog.monsite.com, shop.monsite.com, etc.).

En revanche, si vous créez un cookie en spécifiant domain=monsite.com, alors tous ses sous-domaines seront inclus.

document.cookie = "user=Athios; domain=monsite.com";

Chemin

Il est également possible de spécifier pour quelles URLs l’entête du cookie doit être envoyée avec l’option path.

Si path n’est pas défini, il s’agit du chemin actuel.

Par exemple, un cookie défini avec path=/shop sera disponible dans les pages /shop et /shop/… mais pas dans les pages /admin ou /blog.

document.cookie = "user=Athios; domain=monsite.com; path=/shop";

Durée

Par défaut, un cookie est supprimé dès que le navigateur est fermé (fin de la session). Il est également possible de préciser une date d’expiration pour un cookie, afin de le conserver plus longtemps pour pouvoir le réutiliser dans le futur.

Il y a deux manières de spécifier cette date d’expiration :

1. Avec l’option expires, en définissant un objet Date sur lequel on applique la méthode toUTCString() pour le formater en texte.
2. Avec l’option max-age, en définissant un nombre en secondes à partir du moment actuel.

On va ainsi par exemple pouvoir définir un cookie qui devra expirer exactement 24h après sa création comme cela :

// Déclaration avec l'objet Date
let date = new Date(Date.now() + 86400000); // 86400000ms = 1 jour
document.cookie = "user=Athios; expires=" + date.toUTCString();

// Déclaration avec un nombre de secondes
document.cookie = "user=Athios; max-age=86400";

Modification

Il n’existe pas de fonction permettant de modifier uniquement la valeur d’un cookie. Pour cela, on procédera à la redéclaration d’un cookie existant.

// Modification du cookie "user" avec pour nouvelle valeur "John"
document.cookie = "user=John";

Suppression

Pour supprimer un cookie, la méthode la plus simple est de le redéclarer sans valeur et en précisant cette fois-ci une date d’expiration passée ou encore max-age=0.

document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC';
document.cookie = 'user=; max-age=0';

Lecture

Il est possible de lire tous les cookies déposés sur un domaine avec document.cookie.

console.log(document.cookie);