Rassemble les éléments d'un tableau en une chaîne
Un cookie est un petit fichier texte qui permet de stocker une petite quantité de données (4KB) sur l'ordinateur de l'utilisateur.
Ils sont généralement utilisés pour garder la trace d'informations telles que les préférences de l'utilisateur que le site peut récupérer pour personnaliser la page lors de la prochaine visite de l'utilisateur.
Les cookies sont un ancien mécanisme de stockage côté client, conçu à l'origine pour être utilisé par des langages de script côté serveur tels que PHP, ASP, etc. Cependant, les cookies peuvent également être créés, consultés et modifiés directement à l'aide de JavaScript, mais le processus est un peu compliqué et désordonné.
Remarque : Un cookie peut faire jusqu'à 4 Ko, y compris son nom et ses valeurs, les cookies qui dépassent cette longueur sont réduits pour s'adapter. En outre, chaque fois que le navigateur demande une page au serveur, toutes les données contenues dans le cookie sont automatiquement envoyées au serveur dans le cadre de la demande.
Avertissement : Ne stockez jamais de données sensibles telles qu'un mot de passe ou des informations relatives à une carte de crédit dans les cookies, car elles pourraient être manipulées par un utilisateur malveillant.
Un cookie est une variable qui est stockée sur l'ordinateur du visiteur. Chaque fois que l'ordinateur demande une page avec un navigateur, il enverra le cookie avec les différentes variables d’informations envoyées en générale vers le serveur.
En JavaScript, vous pouvez créer, lire et supprimer des cookies avec la propriété document.cookie. Cette propriété représente tous les cookies associés à un document.
Pour créer ou stocker un nouveau cookie, attribuez une chaîne nom=valeur à cette propriété, comme ceci :
document.cookie = " prénom=Carabde " ;
Donc un cookie est constitué de paire nom/valeur
Avec JavaScript, vous pouvez créer et récupérer des valeurs de cookie.
La première fois qu'un visiteur arrive sur votre page web, il doit par exemple remplir son nom, son login ou toute autre information que vous lui demandez. Ces informations ou une partie peuvent ensuite être stocké dans un cookie. La prochaine fois, que le visiteur arrive sur votre page, il ou elle pourrait obtenir un message de bienvenue comme « Bienvenue Carabde! » Ce nom est extrait du cookie qui a été stocké sur son PC.
Ou la première fois qu'un visiteur arrive sur votre page web, vous stockez la date actuelle dans un cookie.La prochaine fois, que le visiteur arrive sur votre page, il pourrait obtenir un message du genre "votre dernière visite était le samedi 22 août 2010!". La date est récupérée à partir du cookie stocké
Une valeur de cookie ne peut pas contenir de point-virgule, de virgule ou d'espace. Pour cette raison, vous devrez utiliser la fonction intégrée de JavaScript encodeURIComponent() pour coder les valeurs contenant ces caractères avant de les stocker dans le cookie. De même, vous devrez utiliser la fonction correspondante decodeURIComponent() lorsque vous lirez la valeur du cookie.
document.cookie = "nom=" + encodeURIComponent("Christophe Columb");
Par défaut, la durée de vie d'un cookie correspond à la session actuelle du navigateur, ce qui signifie qu'il est effacé lorsque l'utilisateur quitte le navigateur. Pour qu'un cookie dure au-delà de la session de navigation en cours, vous devez spécifier sa durée de vie (en secondes) avec un attribut max-age. Cet attribut détermine combien de temps un cookie peut rester sur le système de l'utilisateur avant d'être supprimé, par exemple, le cookie suivant vivra pendant 30 jours.
document.cookie = "firstName=Christopher ; max-age=" + 30*24*60*60 ;
Vous pouvez également spécifier la durée de vie d'un cookie avec l'attribut expires. Cet attribut prend une date exacte (au format GMT/UTC) à laquelle le cookie doit expirer, plutôt qu'un décalage en secondes.
document.cookie = " prénom=Christophe ; expires=Thu, 31 Dec 2099 23:59:59 GMT " ;
Voici une fonction qui définit un cookie avec un attribut max-age facultatif. Vous pouvez aussi utiliser la même fonction pour supprimer un cookie en passant la valeur 0 pour le paramètre daysToLive.Dans cet exemple, nous allons créer un cookie qui stocke le nom d'un visiteur. La première fois que le visiteur arrive sur la page web, il va donner son nom (et peut être d’autres informations). Ce nom est ensuite stocké dans un cookie. La prochaine fois que le visiteur arrive sur la même page, il recevra un message de bienvenue.
Tout d'abord, nous créons une fonction qui contient le nom du visiteur dans une variable de cookie :
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Définir et obtenir des cookies en JavaScript</title>
</head>
<body>
<script>
// Une fonction personnalisée pour définir les cookies
function setCookie(nom, value, dateExpiration) {
/*Encodez la valeur pour éviter les points-virgules, les virgules et les espaces.*/
var cookie = nom + "=" + encodeURIComponent(value);
if(typeof dateExpiration === "number") {
/* Définit l'attribut max-age de façon à ce que le cookie expire après le nombre de jours spécifié */
cookie += "; max-age=" + (dateExpiration*24*60*60);
document.cookie = cookie;
}
}
// Une fonction personnalisée pour récupérer les cookies
function getCookie(nom) {
/* Divise la chaîne de cookies et récupère toutes les paires nom=valeur individuelles dans un tableau.*/
var cookieArr = document.cookie.split(";");
// Boucle à travers les éléments du tableau
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
/* Supprime les espaces au début du nom du cookie et le compare avec la chaîne de caractères donnée */
if(nom == cookiePair[0].trim()) {
// Decode the cookie value and return
return decodeURIComponent(cookiePair[1]);
}
}
// Retourner null si non trouvé
return null;
}
// Une fonction personnalisée pour vérifier et récupérer les cookies
function checkCookie() {
// Récupérer le cookie en utilisant notre fonction personnalisée
var nom = getCookie("nom");
if(nom != null) {
alert("Bienvenue à nouveau, " + nom+ " merci pour votre retour dans le site");
} else {
nom = prompt("Veuillez saisir votre prénom:");
if(nom != "" && nom != null) {
/* Créer un cookie en utilisant notre fonction personnalisée*/
setCookie("nom", nom, 2);
}
}
}
// Vérifier le cookie au chargement de la page
window.onload = checkCookie;
</script>
<p><strong>Note:</strong> Maintenant, si vous appuyez sur le bouton "Voir cookie" ou si vous rafraîchissez la page, vous verrez un message de bienvenue, si vous avez saisi votre prénom dans la boîte de dialogue d'invite.
Pour éffacer le cookie appuyez sur le bouton "Effacer cookie".
</p>
<button onclick="checkCookie();">Voir cookie</button>
<button onclick='setCookie("nom", "", 0);'>Effacer cookie</button>
</body>
</html>
Les paramètres de la fonction setCookie(nom, value, dateExpiration) ci-dessus contiennent le nom du cookie, la valeur du cookie et le nombre de jours avant expiration du cookie.
Dans notre cas nous avons:
setCookie("nom", nom, 2)
ce qui fixe la date d'expiration à 2 jours(48h)
Dans la fonction ci-dessus nous convertissons tout d'abord le nombre de jours en une date valide, puis nous ajoutons le nombre de jours pour lequel le cookie va expirer. Après, nous enregistrons le nom de cookie, la valeur du cookie et la date d'expiration dans l'objet document.cookie.
Pour récupérer la valeur du cookie c'est-à-dire les informations qu’il contient, nous créons une autre fonction getCookie(nom) qui retourne la valeur d'un cookie spécifié
Par défaut, un cookie est disponible pour toutes les pages Web du même répertoire ou des sous-répertoires de ce répertoire. Toutefois, si vous spécifiez un chemin d'accès, le cookie est disponible pour toutes les pages Web du chemin d'accès spécifié et pour toutes les pages Web de tous les sous-répertoires de ce chemin d'accès. Par exemple, si le chemin est défini sur /, le cookie est disponible sur l'ensemble d'un site Web, quelle que soit la page qui crée le cookie.
document.cookie = "nom=Christophe; path=/";
En outre, vous pouvez utiliser l'attribut domain si vous souhaitez qu'un cookie soit disponible sur plusieurs sous-domaines. Par défaut, les cookies ne sont disponibles que pour les pages du domaine dans lequel ils ont été créés.
Si un cookie créé par une page sur blog.exemple.com définit son attribut path à / et son attribut domain à exemple.com, ce cookie est également disponible pour toutes les pages Web sur backend.exemple.com, portal.exemple.com. Par contre, vous ne pouvez pas partager les cookies en dehors d'un domaine.
document.cookie = "nom=Christophe; path=/; domain=exemple.com";
Il existe également un attribut booléen appelé secure. Si cet attribut est spécifié, le cookie ne sera transmis que par une connexion sécurisée (c'est-à-dire cryptée) telle que HTTPS.
document.cookie = "nom=Christophe; path=/; domain=exemple.com; secure";
La lecture d'un cookie est un peu plus complexe car la propriété document.cookie renvoie simplement une chaîne contenant un point-virgule et une liste séparée par des espaces de tous les cookies (c'est-à-dire des paires nom=valeur, par exemple, firstName=chrisophe ; lastName=Colubm ;). Cette chaîne ne contient pas les attributs tels que expires, path, domain, etc. qui peuvent avoir été définis pour le cookie.
Afin d'obtenir le cookie individuel de cette liste, vous devez utiliser la méthode split() pour la décomposer en paires nom=valeur individuelles, et rechercher le nom spécifique, comme indiqué ci-dessous :
Code
// Une fonction personnalisée pour récupérer les cookies
function getCookie(nom) {
/* Divise la chaîne de cookies et récupère toutes les paires nom=valeur individuelles dans un tableau.*/
var cookieArr = document.cookie.split(";");
// Boucle à travers les éléments du tableau
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
/* Supprime les espaces au début du nom du cookie et le compare avec la chaîne de caractères donnée */
if(nom == cookiePair[0].trim()) {
// Decode the cookie value and return
return decodeURIComponent(cookiePair[1]);
}
}
// Retourner null si non trouvé
return null;
}
Ensuite, nous allons créer une autre fonction checkCookie() qui vérifiera si le cookie firstName est défini ou non en utilisant la fonction getCookie() ci-dessus, et s'il est défini, cette fonction affichera un message de bienvenue, et s'il ne l'est pas, cette fonction demandera à l'utilisateur d'entrer son prénom et de le stocker dans le cookie en utilisant notre fonction setCookie() créée précédemment.
Code
// Une fonction personnalisée pour vérifier et récupérer les cookies
function checkCookie() {
// Récupérer le cookie en utilisant notre fonction personnalisée
var nom = getCookie("nom");
if(nom != null) {
alert("Bienvenue à nouveau, " + nom + " merci pour votre retour dans le
site");
} else {
nom = prompt("Veuillez saisir votre prénom:");
if(nom != "" && nom != null) {
/* Créer un cookie en utilisant notre fonction personnalisée*/
setCookie("nom", nom, 2);
}
}
}
La seule façon de mettre à jour ou de modifier un cookie est de créer un autre cookie avec le même nom et le même chemin d'accès qu'un cookie existant. La création d'un cookie avec le même nom mais avec un chemin différent de celui d'un cookie existant ajoutera un cookie supplémentaire.
Pour supprimer un cookie, il suffit de le définir à nouveau en utilisant le même nom, en spécifiant une valeur vide ou arbitraire, et en définissant son attribut max-age à 0. N'oubliez pas que si vous avez spécifié un chemin d'accès et un attribut de domaine pour le cookie, vous devrez également les inclure lors de sa suppression.
setCookie("nom", "", 0);