Écrire et lire un cookie en JavaScript

Un cookie permet de sauvegarder une feuille de style choisie par un utilisateur pour l'afficher quand il revient sur la page. Voici comment.

Un cookie est un fichier texte géré par le navigateur internet et créé par les sites. Il permet de sauvegarder des données sous la forme clé=valeur et de les récupérer à n'importe quel moment. L'intérêt des cookies et de pouvoir sauvegarder des données pour l'utilisateur afin de conserver ces informations pendant le parcours du site. Ce système est notamment utilisé par les sites d'e-commerce pour gérer les paniers d'achats, mais aussi par certains sites web pour traquer les utilisateurs sur d'autres sites et leur afficher des publicités personnalisées.

Pour illustrer l'utilisation des cookies en JavaScript, prenons l'exemple d'une feuille de style CSS qui peut être changée avec une liste déroulante :

//JavaScript
//Ajout de l'événement pour détecter un changement dans le choix de la feuille de style
document.getElementById(listeCSS).addEventListener(change, changerFeuilleDeStyle, true);
function changerFeuilleDeStyle()
{
 //On change la feuille de style en fonction du choix dans la liste déroulante.
 document.getElementById(css).href = this.value;
}
<!-- HTML -->
<link id=css href=style.css rel=stylesheet type=text/css media=all/>
<select id=listeCSS>
 <option value=style.css>style.css</option>
 <option value=style_rouge.css>style_rouge.css</option>
 <option value=style_bleu.css>style_bleu.css</option>
</select>

Dans cet exemple, la feuille de style est modifiée par la liste déroulante. Grâce aux cookies, il est possible de sauvegarder ce choix pour afficher la feuille de style choisie par l'utilisateur quand il revient sur la page. Pour ajouter un cookie, il suffit de modifier la variable Document.cookie. Le fait d'écrire plusieurs fois cette instruction n'écrase pas les cookies, qui sont ajoutés dans la variable. Seul le cookie ayant la même clé est écrasé. Si on ajoute également la variable expires ou max-age, on définit une date d'expiration au-delà de laquelle le cookie est supprimé (si elle n'est pas indiquée, le cookie est supprimé à la fin de la session).

function changerFeuilleDeStyle()
{
 //On change la feuille de style en fonction du choix dans la liste déroulante.
 document.getElementById(css).href = this.value;
 //On crée le cookie
 var cookie = maFeuilleCSS= + this.value;
 //On crée un délai d'expiration d'une semaine pour le cookie.
 var date = new Date();
 date.setTime(date.getTime()+(7*24*60*60*1000)); /* La date est en millisecondes */
 cookie += ; expires=+date.toGMTString(); /* Les dates des cookies doivent être au format GMT */
 document.Cookie = cookie; /* Ajout du cookie */
}

Une fois le cookie sauvegardé, il faut ensuite le lire. Pour cela, la chaîne Document.cookie peut être lue et contient tous les cookies sous la forme clé=valeur;. Il suffit de parcourir cette chaîne en la séparant avec les caractères ; et =, ou bien d'utiliser une expression régulière.

//Au chargement de la page
document.addEventListener(load, chargerFeuileDeStyle, true);
function chargerFeuilleDeStyle()
{
 //On peut obtenir le cookie que l'on souhaite avec une expression régulière.
 var feuilleDeStyle = document.cookie.replace(/(?:(?:^|.*;s*)maFeuilleCSSs*=s*([^;]*).*$)|^.*$/, $1);
 //Il ne reste plus qu'à attribuer la feuille de style.
 document.getElementById(css).href = feuilleDeStyle;
}

Les cookies peuvent être utilisés avec d'autres paramètres et des techniques plus avancées. Pour en apprendre plus sur les cookies, visitez ces pages web.

JavaScript