Créer un cookie en javascript

En général on créé des cookie côté serveur (via les headers HTTP, comme le fait la fonction setcookie en PHP). Mais on peut aussi créer un cookie côté client en Javascript.

Le fonctionnement est un peu étrange et vraiment pas pratique, l'accès aux cookies en Javascript se fait via la variable document.cookie. Cette variable contient la liste des cookies définis sur le domaine courant, chaque cookie étant séparé par un point virgule, et se présente comme ceci : nom=valeur.

Pour créer, modifier ou supprimer un cookie, il suffit d'affecter une valeur à document.cookie. Le navigateur web implémente un mécanisme spécifique pour cette variable document.cookie, c'est bizarre mais ça marche. Voici quelques exemples :

Créer un cookie en Javascript

La syntaxe est très simple, cette ligne créé un cookie nommé "dessert" ayant pour valeur "crumble" :

document.cookie = "dessert=crumble";

Par défaut, le cookie est créé sur le chemin courant (et non à la racine du domaine), et expire dans 1 an. On peut définir la date d'expiration et le chemin comme ceci :

document.cookie = "dessert=crumble; expires=" + new Date("2013-03-15").toUTCString() + "; path=/";

D'autres options permettent de créer un cookie sécurisé (HTTPS).

Modifier un cookie en Javascript

La modification ressemble beaucoup à la création, en fait tout se passe comme si on créé un nouveau cookie qui va écraser l'ancien.

document.cookie = "dessert=Crème brulée; expires=" + new Date("2013-03-15").toUTCString() + "; path=/"

Si vous voulez en savoir plus c'est par ici : quelle version d'excel choisir ?.

Supprimer un cookie en Javascript

Pour supprimer un cookie, il faut le modifier en lui affectant une date d'expiration dans le passé :

document.cookie = "dessert=; expires=" + new Date("1970-01-01").toUTCString() + "; path=/"

HttpOnly

Tous les cookies ne sont pas accessibles via Javascript. Lorsqu'un cookie est créé par la méthode normale, c'est à dire via un header HTTP Set-Cookie, le serveur peut définir l'option HttpOnly. Un cookie HttpOnly est invisible en Javascript, n'apparaît même pas dans la variable document.cookie.

Créer un cookie avec jQuery

jQuery ne permet pas nativement de manipuler les cookies, mais il existe un plugin jQuery qui permet de le faire. Le projet est téléchargeable sur GitHub : https://github.com/carhartl/jquery-cookie.

Découvrez ce tutoriel photoshop : carte de noël magique à lire tout de suite !