Dans ce chapitre nous allons voir comment manipuler les cookies depuis notre code JavaScript. Les cookies permettent de stocker des informations sur le navigateur de l'utilisateur et de transférer ces informations lors de requêtes HTTP au travers de l'en-tête cookie. Ce système permet d'introduire une notion de persistence entre les plusieurs requêtes et s'avère très utile pour un système de connexion utilisateur par exemple. Certains cookies (ceux qui ne sont pas en httpOnly) peuvent être vus et manipulés par le JavaScript.
Pour récupérer les cookies de la page courante il suffit d'accéder à la propriété cookie sur document
document.cookie // "cookie1=valeur%20avec%20espace; cookie2=valeur2"Pour définir un cookie il faudra modifier cette propriété.
document.cookie = "cookie3=nouvelle%20valeur;"Il est possible d'ajouter des informations pour configurer le cookie mais je vous renvoie sur la documentation MDN pour plus d'informations.
Fonctions utiles
La méthode d'interaction avec les cookies n'étant pas évoluée il ne faudra pas hésiter à vous créer des méthodes pour vous aider à les utiliser.
/**
* Récupère les données associées à un cookie
* @param {string} name Nom du cookie à récupérer
* @return {string|null}
*/
function getCookie(name) {
const cookies = document.cookie.split('; ')
const value = cookies
.find(c => c.startsWith(name + "="))
?.split('=')[1]
if (value === undefined) {
return null
}
return decodeURIComponent(value)
}
/**
* Créer ou modifie la valeur d'un cookie avec une durée spécifique
* @param {string} name
* @param {string} value
* @param {number} days Durée de vie du cookie (en jours)
*/
function setCookie(name, value, days) {
const date = new Date()
date.setDate(date.getDate() + days)
document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()};`
}
