Cookies Javascript
Les cookies vous permettent de stocker des informations sur les utilisateurs dans des pages Web.
Que sont les cookies ?
Les cookies sont des données stockées dans de petits fichiers texte sur votre ordinateur.
Lorsqu'un serveur Web a envoyé une page Web à un navigateur, la connexion est coupée et le serveur oublie tout ce qui concerne l'utilisateur.
Les cookies ont été inventés pour résoudre le problème "comment se souvenir des informations sur l'utilisateur":
- Lorsqu'un utilisateur visite une page Web, son nom peut être stocké dans un cookie.
- La prochaine fois que l'utilisateur visite la page, le cookie "se souvient" de son nom.
Les cookies sont enregistrés dans des paires nom-valeur telles que :
username = John Doe
Lorsqu'un navigateur demande une page Web à un serveur, les cookies appartenant à la page sont ajoutés à la demande. De cette façon, le serveur obtient les données nécessaires pour "se souvenir" des informations sur les utilisateurs.
Aucun des exemples ci-dessous ne fonctionnera si votre navigateur a désactivé la prise en charge des cookies locaux.
Créer un cookie avec JavaScript
JavaScript peut créer, lire et supprimer des cookies avec la document.cookie
propriété.
Avec JavaScript, un cookie peut être créé comme ceci :
document.cookie = "username=John Doe";
Vous pouvez également ajouter une date d'expiration (en heure UTC). Par défaut, le cookie est supprimé à la fermeture du navigateur :
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Avec un paramètre de chemin, vous pouvez indiquer au navigateur à quel chemin appartient le cookie. Par défaut, le cookie appartient à la page en cours.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Lire un cookie avec JavaScript
Avec JavaScript, les cookies peuvent être lus comme ceci :
let x = document.cookie;
document.cookierenverra tous les cookies dans une chaîne similaire à : cookie1=valeur ; cookie2=valeur ; cookie3=valeur ;
Modifier un cookie avec JavaScript
Avec JavaScript, vous pouvez modifier un cookie de la même manière que vous le créez :
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
L'ancien cookie est écrasé.
Supprimer un cookie avec JavaScript
La suppression d'un cookie est très simple.
Vous n'avez pas besoin de spécifier une valeur de cookie lorsque vous supprimez un cookie.
Définissez simplement le paramètre expires sur une date passée :
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Vous devez définir le chemin du cookie pour vous assurer que vous supprimez le bon cookie.
Certains navigateurs ne vous permettront pas de supprimer un cookie si vous ne spécifiez pas le chemin.
La chaîne de cookies
La document.cookiepropriété ressemble à une chaîne de texte normale. Mais ce n'est pas.
Même si vous écrivez une chaîne de cookie entière dans document.cookie, lorsque vous la lisez à nouveau, vous ne pouvez en voir que la paire nom-valeur.
Si vous définissez un nouveau cookie, les anciens cookies ne sont pas écrasés. Le nouveau cookie est ajouté à document.cookie, donc si vous relisez document.cookie, vous obtiendrez quelque chose comme :
cookie1 = valeur ; cookie2 = valeur ;
Si vous souhaitez trouver la valeur d'un cookie spécifié, vous devez écrire une fonction JavaScript qui recherche la valeur du cookie dans la chaîne de cookie.
Exemple de cookie JavaScript
Dans l'exemple qui suit, nous allons créer un cookie qui stocke le nom d'un visiteur.
La première fois qu'un visiteur arrive sur la page Web, il lui sera demandé de saisir son nom. Le nom est ensuite stocké dans un cookie.
La prochaine fois que le visiteur arrivera sur la même page, il recevra un message de bienvenue.
Pour l'exemple nous allons créer 3 fonctions JavaScript :
- Une fonction pour définir une valeur de cookie
- Une fonction pour obtenir une valeur de cookie
- Une fonction pour vérifier la valeur d'un cookie
Une fonction pour définir un cookie
Tout d'abord, nous créons un functionqui stocke le nom du visiteur dans une variable cookie :
Exemple
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Exemple expliqué :
Les paramètres de la fonction ci-dessus sont le nom du cookie (cname), la valeur du cookie (cvalue) et le nombre de jours jusqu'à ce que le cookie expire (exdays).
La fonction définit un cookie en additionnant le nom du cookie, la valeur du cookie et la chaîne d'expiration.
Une fonction pour obtenir un cookie
Ensuite, nous créons un functionqui renvoie la valeur d'un cookie spécifié :
Exemple
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Fonction expliquée :
Prenez le cookiename comme paramètre (cname).
Créez une variable (name) avec le texte à rechercher (cname + "=").
Décodez la chaîne de cookie, pour gérer les cookies avec des caractères spéciaux, par exemple '$'
Divisez document.cookie sur des points-virgules dans un tableau appelé ca (ca = decodedCookie.split(';')).
Parcourez le tableau ca (i = 0; i < ca.length; i++) et lisez chaque valeur c = ca[i]).
Si le cookie est trouvé (c.indexOf(name) == 0), retourne la valeur du cookie (c.substring(name.length, c.length).
Si le cookie n'est pas trouvé, retourne "".
Une fonction pour vérifier un cookie
Enfin, nous créons la fonction qui vérifie si un cookie est défini.
Si le cookie est défini, il affichera un message d'accueil.
Si le cookie n'est pas défini, il affichera une boîte de dialogue, demandant le nom de l'utilisateur, et stocke le cookie de nom d'utilisateur pendant 365 jours, en appelant la setCookiefonction :
Exemple
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Tous ensemble maintenant
Exemple
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
L'exemple ci-dessus exécute la checkCookie()fonction lors du chargement de la page.