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 :
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 le document.cookie
propriété.
Avec JavaScript, un cookie peut être créé comme ceci :
document.cookie = « nom d’utilisateur=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 = « nom d’utilisateur=John Doe ; expires=jeu 18 décembre 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=jeu 18 décembre 2013 12:00:00 UTC; path=/ »;
Lire un cookie avec JavaScript
Avec JavaScript, les cookies peuvent être lus comme ceci :
document.cookie renverra 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=jeu 18 décembre 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=jeu, 01 janvier 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
Le document.cookie proprié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
Dans un premier temps, nous créons un function qui stocke le nom du visiteur dans une variable cookie :
Exemple
function setCookie(cname, cvalue, exdays) {
const d = nouvelle Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
laissez expires = « expires= »+ d.toUTCString();
document.cookie = cname + « = » + cvalue + « ; » + expire + « ;chemin=/ »;
}
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 function qui renvoie la valeur d’un cookie spécifié :
Exemple
function getCookie(cname) {
let name = cname + « = » ;
let décodéCookie = decodeURIComponent(document.cookie);
let ca = décodéCookie.split(‘;’);
for(let i = 0; i
tandis que (c.charAt(0) == ‘ ‘) {
c = c.substring(1);
}
si (c.indexOf(nom) == 0) {
return c.substring(name.length, c.length);
}
}
retour « »;
}
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 du nom d’utilisateur pendant 365 jours, en appelant le setCookie fonction:
Exemple
fonction checkCookie() {
laissez nom d’utilisateur = getCookie(« nom d’utilisateur »);
si (nom d’utilisateur != « ») {
alert(« Bienvenue à nouveau » + nom d’utilisateur);
} autre {
username = prompt(« Veuillez entrer votre nom : », « »);
if (nom d’utilisateur != « » && nom d’utilisateur != null) {
setCookie(« nom d’utilisateur », nom d’utilisateur, 365);
}
}
}
Tous ensemble maintenant
Exemple
function setCookie(cname, cvalue, exdays) {
const d = nouvelle Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
laissez expires = « expires= »+d.toUTCString();
document.cookie = cname + « = » + cvalue + « ; » + expire + « ;chemin=/ »;
}
function getCookie(cname) {
let name = cname + « = » ;
laissez ca = document.cookie.split(‘;’);
for(let i = 0; i < ca.length; i++) {
soit c = ca[i];
tandis que (c.charAt(0) == ‘ ‘) {
c = c.substring(1);
}
si (c.indexOf(nom) == 0) {
return c.substring(name.length, c.length);
}
}
retour « »;
}
fonction checkCookie() {
laissez utilisateur = getCookie(« nom d’utilisateur »);
si (utilisateur != « ») {
alert(« Bienvenue à nouveau » + utilisateur);
} autre {
user = prompt(« Veuillez entrer votre nom : », « »);
if (utilisateur != « » && utilisateur != null) {
setCookie(« nom d’utilisateur », utilisateur, 365);
}
}
}
Essayez-le vous-même »
L’exemple ci-dessus exécute le checkCookie() fonction lors du chargement de la page.
#Cookies #Javascript
