Manipuler les cookies

Voir la vidéo
Description Sommaire

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ête et s'avère très util pour un système de connexion utilisateur par exemple. Certains cookies (ceux qui ne sont pas en httpOnly) peuvent être vu et manipuler 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 renvois sur la documentation MDN pour plus d'informations.

Fonctions utiles

La méthode d'interaction avec les cookies n'étant pas évolué 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()};` 
}
Publié
Technologies utilisées
Auteur :
Grafikart
Partager