Créer un cookie simplement avec JS cookie
JavaScript (JS)
Par arthur-and-ashes,
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. 🙂
retrouvez tous les outils et ressources en liens avec ce tuto ...
Sources externes :
- la bibliothèque JS Cookie sur github
- L’extension Chrome EditThisCookie
Technologies utilisées pour ce tuto :
JavaScript (JS)
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