Créer un cookie simplement avec JS cookie

Logo JavaScript (JS) JavaScript (JS)

Par ,
Publié le 24 février 2018

Il y a peu, j’ai été amené à créer un cookie pour un site web marchand. Mon objectif était d’enregistrer des données utilisateurs côté client (dans le navigateur de l’internaute qui visite mon site) afin de m’en resservir plus tard. C’est le rôle d’un cookie : petit fichier texte qui va stocker des données relatives à la session d’un utilisateur dans le navigateur utilisé par l’internaute. Mais voila, je n’avais encore jamais créé de cookie auparavant. (A part peut être certains au chocolat, mais ce n’est pas la même recette 🙂 )

Après quelques recherches, j’ai découvert la bibliothèque JS Cookie sur Github. (anciennement jQuery Cookie, version qui n’est plus supportée). Ces quelques lignes de code vous proposent des méthodes très simples et efficaces pour créer un cookie en Javascript.

Pour utiliser cette bibliothèque, il vous suffit de charger un seul fichier JavaScript contenant des fonctions très utiles pour créer votre cookie. (L’ancienne version de JS Cookie marchait avec jQuery, et nécessitait donc le chargement de 2 bibliothèques).

<!-- Après avoir hébergé le fichier js.Cookie.js, appelez-le sur votre page web -->
<script src="/path/to/js.cookie.js"></script>

<!-- Pour aller plus vite, vous pouvez aussi charger cette version hébergée du script -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

La Bibliothèque vous fournit des fonctions prêtes à l’emploi pour créer, mettre à jour ou supprimer vos cookies :

/* Configurez votre cookie */
var value = 'mon cookie préféré';
Cookies.set('name', value, { expires: 7 });

/* Récupérez les valeurs de n'importe quel cookie */
Cookies.get(); // => { name: 'value' }

/* Supprimez les valeurs de n'importe quel cookie */
Cookies.remove('name');

Pour checker si votre cookie est fonctionnel, vous pouvez utiliser des extensions de navigateur qui vous permettent d’éditer, de lire ou de supprimer vos cookies en quelques clics. Sur Google Chrome, je vous conseille l’extension « EditThisCookie ».

Il ne vous reste plus qu’à passer vos valeurs dans la variable JS value. Attentions de bien respecter les règles légales relatives à l’utilisation de cookies. 🙂

S’abonner
Notification pour
1 Commentaire
Commentaires en ligne
Afficher tous les commentaires
QuentinD
QuentinD
5 années il y a

Bonjour ! Je viens de tomber sur ton tuto très intéressant. Sais-tu, en revanche, si il existe des outils permettant de générer un cookie tracké ?

Bien à toi,

Quentin Deguffroy