JavaScript Cookie

Les cookies sont utilisés pour stocker des informations utilisateur sur les pages web.

Qu'est-ce qu'un cookie ?

Les cookies sont des données stockées dans des fichiers texte sur votre ordinateur.

Lorsqu'un serveur web envoie une page web à un navigateur, après la fermeture de la connexion, le serveur n'enregistre pas les informations de l'utilisateur.

Le rôle des cookies est de résoudre « comment enregistrer les informations utilisateur côté client » :

  • Lorsqu'un utilisateur visite une page web, son nom peut être enregistré dans un cookie.
  • Lorsque l'utilisateur visite la page la prochaine fois, l'enregistrement de visite de l'utilisateur peut être lu à partir du cookie.

Les cookies sont stockés sous forme de paires nom/valeur, comme indiqué ci-dessous :

username=John Doe

Lorsqu'un navigateur demande une page web à un serveur, les cookies appartenant à cette page sont ajoutés à la requête. Le serveur obtient les informations de l'utilisateur de cette manière.

Utilisation de JavaScript pour créer un cookie

JavaScript peut utiliser la propriétédocument.cookiepour créer, lire et supprimer des cookies.

En JavaScript, la création d'un cookie se fait comme suit :

document.cookie="username=John Doe";

Vous pouvez également ajouter une date d'expiration au cookie (en heure UTC ou GMT). Par défaut, le cookie est supprimé lorsque le navigateur est fermé :

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

Vous pouvez utiliser le paramètre path pour indiquer au navigateur le chemin du cookie. Par défaut, le cookie appartient à la page actuelle.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

Utilisation de JavaScript pour lire un cookie

En JavaScript, vous pouvez utiliser le code suivant pour lire un cookie :

var x = document.cookie;

Note document.cookie renverra tous les cookies sous forme de chaîne, au format : cookie1=value; cookie2=value; cookie3=value;

Utilisation de JavaScript pour modifier un cookie

En JavaScript, modifier un cookie est similaire à la création d'un cookie, comme indiqué ci-dessous :

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

L'ancien cookie sera écrasé.

Utiliser JavaScript pour supprimer un cookie

La suppression d'un cookie est très simple. Il vous suffit de définir le paramètre expires sur une date passée, comme indiqué ci-dessous, définie sur Thu, 01 Jan 1970 00:00:00 GMT :

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Notez que vous n'avez pas besoin de spécifier la valeur du cookie lors de sa suppression.

Chaîne de cookie

La propriété document.cookie ressemble à une chaîne de texte ordinaire, mais ce n'est pas le cas.

Même si vous écrivez une chaîne de cookie complète dans document.cookie, lorsque vous relisez les informations du cookie, celles-ci sont affichées sous la forme de paires nom/valeur.

Si vous définissez un nouveau cookie, l'ancien cookie ne sera pas écrasé. Le nouveau cookie sera ajouté à document.cookie, donc si vous relisez document.cookie, vous obtiendrez les données comme indiqué ci-dessous :

cookie1=value; cookie2=value;

     

Si vous devez trouver une valeur de cookie spécifique, vous devez créer une fonction JavaScript pour rechercher la valeur du cookie dans la chaîne de cookie.

Exemples de cookies JavaScript

Dans les exemples suivants, nous allons créer des cookies pour stocker les noms des visiteurs.

Tout d'abord, lorsqu'un visiteur visite une page web, il sera invité à saisir son nom. Le nom sera stocké dans un cookie.

La prochaine fois que le visiteur visite la page, il verra un message de bienvenue.

Dans cet exemple, nous allons créer 3 fonctions JavaScript :

  1. Fonction pour définir la valeur d'un cookie
  2. Fonction pour obtenir la valeur d'un cookie
  3. Fonction pour vérifier la valeur d'un cookie

Fonction pour définir la valeur d'un cookie

D'abord, nous créons une fonction pour stocker le nom du visiteur :

function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; }

Décomposition de la fonction :

Dans les paramètres de fonction ci-dessus, le nom du cookie est cname, la valeur du cookie est cvalue, et le temps d'expiration du cookie expires est défini.

Cette fonction définit le nom du cookie, la valeur du cookie et le temps d'expiration du cookie.

Fonction pour obtenir la valeur d'un cookie

Ensuite, nous créons une fonction pour renvoyer la valeur d'un cookie spécifié :

function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; }

Décomposition de la fonction :

Le paramètre de nom du cookie est cname.

Créez une variable texte pour rechercher le cookie spécifié : cname + "=".

Utilisez des points-virgules pour découper la chaîne document.cookie, puis affectez le tableau de chaînes résultant à ca (ca = document.cookie.split(';')).

Parcourez le tableau ca (i=0;i<ca.length;i++), puis lisez chaque valeur du tableau, et supprimez les espaces de début et de fin (c=ca[i].trim()).

Si le cookie est trouvé (c.indexOf(name) == 0), retournez la valeur du cookie (c.substring(name.length, c.length)).

Si le cookie n'est pas trouvé, retournez "".

Fonction pour vérifier la valeur du cookie

Enfin, nous pouvons créer une fonction pour vérifier si un cookie a été créé.

Si le cookie est défini, un message d'accueil sera affiché.

Si le cookie n'est pas défini, une fenêtre pop-up s'affichera pour demander le nom du visiteur, et la fonction setCookie sera appelée pour stocker le nom du visiteur pendant 365 jours :

function checkCookie() { var username=getCookie("username"); if (username!="") { alert("Bienvenue à nouveau " + username); } else { username = prompt("Veuillez saisir votre nom :",""); if (username!="" && username!=null) { setCookie("username",username,365); } } }

Exemple complet

Exemple

function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires; } function getCookie(cname){ var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); } } return ""; } function checkCookie(){ var user=getCookie("username"); if (user!=""){ alert("Bienvenue" + user + "Revenez nous voir"); } else { user = prompt("Veuillez saisir votre nom :",""); if (user!="" && user!=null){ setCookie("username",user,30); } } }

Essayez-le vous-même »

L'exemple suivant exécute la fonction checkCookie() au chargement de la page.

Autres extensions