Comment définir, vérifier et lire une valeur cookie avec JavaScript?

Les cookies sont de petits fichiers texte qui conservent un peu de données sur l'ordinateur de l'utilisateur (environ 4KB) et sont utilisés pour stocker des informations sur un utilisateur, par exemple, les préférences d'un utilisateur pour un site Web que le site Web peut récupérer pour personnaliser la page Web lorsque L'utilisateur visite à nouveau le site. Pour le dire simplement, les cookies aident à une visite de site Web plus pratique et plus personnel pour les utilisateurs. Un cookie est envoyé sur votre ordinateur par un site Web lorsque vous le visitez et est enregistré dans un fichier de votre ordinateur accessible via votre navigateur Web.

Nous parlerons de la façon de définir, de vérifier et de lire une valeur de cookie avec JavaScript dans cet article. Cependant, avant d'aller plus loin, permettez-moi de souligner au point que les cookies ne doivent pas être utilisés pour stocker des informations critiques / sensibles comme les mots de passe ou les détails de votre carte de crédit, car les personnes malveillantes peuvent y accéder.

Créer un cookie

Le document.biscuit La propriété crée, lit et supprime les cookies et c'est la propriété, qui représente tous les cookies liés à un document. Pour créer un cookie d'abord, nous devons savoir que les cookies sont enregistrés dans des paires de valeurs de nom, par exemple:

Nom d'utilisateur = Obama;

Créons maintenant un cookie en javascript:

document.cookie = "nom d'utilisateur = Obama";

La durée de vie d'un cookie est définie sur la durée de la session actuelle du navigateur, ce qui signifie qu'il expire lorsque l'utilisateur ferme le navigateur. Pour résoudre ce problème, nous utilisons le maximum attribut qui garantit que le cookie persiste au-delà de la session actuelle du navigateur. Dans l'attribut Max-Age, nous pouvons spécifier la durée de vie d'un cookie en secondes I-E combien de temps le cookie restera-t-il avant qu'il ne soit supprimé. La durée de vie du cookie dans le code ci-dessous est de 30 jours:

document.cookie = "username = Obama; max-age =" + 30 * 24 * 60 * 60;

Nous pouvons également utiliser le expirer Attribut qui prend la date exacte plutôt que les secondes au format GMT / UTC et à cette date, le cookie expire:

document.cookie = "nom d'utilisateur = Obama; expire = thu, 26 septembre 2021 12:00:00 UTC";

Un autre attribut que nous pouvons utiliser dans la création de cookie est le chemin Attribut qui indique au navigateur à quel chemin le chemin du cookie appartient plutôt que le chemin par défaut qui est la page actuelle.

document.Cookie = "Username = Obama; Expires = Thu, 26 septembre 2021 12:00:00 UTC; Path = /";

Nous devons utiliser le javascript EncodeuRIComponent () Comme la valeur des cookies contient des virgules, des demi-colons et des espaces et le EncodeuriComponeNet () S'assure que la chaîne ne contient pas les virgules, les demi-colons et les espaces car ceux-ci ne sont pas autorisés dans les cookies.

document.cookie = "username =" + encodeuRIComponent ("Obama");

Cookie de lecture

Nous pouvons lire ou obtenir tous les cookies d'un domaine actuel en utilisant le document.biscuit:

var x = document.biscuit;

Tout comme pour créer un cookie que nous avons utilisé EncodeuRIComponent () En lisant un cookie, nous devons utiliser DecodeuriComponEnet ():

document.cookie = "username =" + decodeuriComponent ("Obama");

Suppression de cookie

Nous pouvons également supprimer un cookie et en JavaScript, le processus est très simple car nous n'avons pas à spécifier une valeur de cookie, nous pouvons utiliser le paramètre Expire et le mettre à jour en utilisant une date passée par exemple:

document.cookie = "username = Obama; expire = thu, 20 nov 2018 12:00:00 UTC; path = /";

Suppression de cookie

Nous pouvons également supprimer un cookie et en JavaScript, le processus est très simple car nous n'avons pas à spécifier une valeur de cookie, nous pouvons utiliser le paramètre Expire et le mettre à jour en utilisant une date passée par exemple:

document.cookie = "username = Obama; expire = thu, 20 nov 2018 12:00:00 UTC; path = /";

Exemple de cookie en javascript

Maintenant que nous savons ce qu'est un cookie, comment créer ou lire un cookie, combinons tout ce que nous avons appris et créons un cookie qui stocke un nom chaque fois qu'un utilisateur visite notre site Web. Nous prendrons un nom d'entrée de l'utilisateur lorsque l'utilisateur entrera pour la première fois dans notre site Web et le stockerons dans un cookie. Lorsque l'utilisateur entre à nouveau sur le site Web, il obtiendra un message de bienvenue sur le site Web.

Pour implémenter l'exemple ci-dessus, nous aurons besoin de 3 fonctions dans lesquelles l'une des fonctions définira un cookie, on lira / obtiendra une valeur de cookie et la dernière fonction vérifiera la valeur cookie.

Définir la fonction cookie

fonction setcookie (nom d'utilisateur, valeur, expiry)
const Date = new Date ();
date.Settime (date.getTime () + (expiry * 24 * 60 * 60 * 1000));
var expires = "expires =" + date.toutcstring ();
document.cookie = nom d'utilisateur + "=" + valeur + ";" + expire + "; path = /";

Obtenez une fonction de cookie

fonction getcookie (nom d'utilisateur)
Selt name = username + "=";
Laissez Spli = document.biscuit.diviser(';');
pour (var j = 0; j < spli.length; j++)
Soit char = spli [j];
Pendant que (char.charat (0) == ")
char = char.sous-chaîne (1);

si (char.indexof (name) == 0)
retour charl.sous-chaîne (nom.longueur, charbon.longueur);


retour "";

Pour obtenir un seul cookie, nous avons utilisé la méthode Split qui décomposera les paires Nom = Valeur, puis rechercher le nom que nous voulons.

Vérifiez la fonction des cookies

fonction Checkcookie ()
var user = getcookie ("nom d'utilisateur");
// Vérifiez si l'utilisateur est nul ou non
si (utilisateur != "")
// Si l'utilisateur n'est pas nul, alors alerte
alert ("bienvenue à nouveau" + utilisateur);

// Si l'utilisateur est nul
autre
// Prenez les commentaires de l'utilisateur
user = invite ("Veuillez saisir votre nom:", "");
// Définir le cookie
si (utilisateur != "" && utilisateur != null)
setCookie ("nom d'utilisateur", utilisateur, 365);



checkcookie ();

Le cookie de vérification vérifie simplement si le nom existe ou non, si l'utilisateur a visité notre site ou non pour la première fois. Il vérifie d'abord la méthode getcookie () qui vérifie si le nom d'utilisateur existe ou non, puis s'il existe affiche le message de bienvenue avec le nom de l'utilisateur. Si le nom d'utilisateur n'existe pas, il appelle la méthode setcookie () et l'utilisateur entre alors le nom et le cookie est défini.

Vous trouverez ci-dessous les captures d'écran du moment où j'ai visité le site pour la première fois:

Vous trouverez ci-dessous la capture d'écran montrant le nom que j'ai défini après avoir rafraîchi la page:

Conclusion

Un cookie est un petit fichier texte composé de quelques informations sur un utilisateur et est un paquet de données qu'un ordinateur reçoit, puis renvoie sans modifier ou modifier. Les cookies du navigateur aident à garder une trace des visites utilisateur et des activités des utilisateurs. Par exemple, vous avez ajouté des articles à votre panier et vous explorez le site et vous êtes allé sur une autre page ou vous le rafraîchissez accidentellement, sans cookies, votre panier deviendrait vide. Nous avons examiné comment définir, vérifier et lire des cookies en javascript avec des exemples dans cet article.