Cookies JavaScript
Que sont les cookies ?
Les cookies sont des éléments de données stockés dans des fichiers texte sur votre ordinateur.
Lorsque le serveur Web envoie une page Web au navigateur, le serveur n'enregistrera pas les informations de l'utilisateur une fois la connexion fermée.
Le rôle des cookies est de résoudre « comment enregistrer les informations utilisateur sur le client » :
Lorsqu'un utilisateur visite une page Web, son nom peut être enregistré dans le cookie.
La prochaine fois que l'utilisateur visitera cette page, l'enregistrement d'accès de l'utilisateur pourra être lu dans le cookie.
Les cookies sont stockés sous forme de paires nom/valeur comme suit :
username=John Doe
Lorsque le navigateur demande une page Web au serveur, les cookies appartenant à la page seront ajoutés à la demande. Le serveur obtient ainsi les informations sur les utilisateurs.
Définition de l'attribut cookie du document
L'attribut cookie peut définir ou interroger tous les cookies liés au document actuel. La syntaxe est la suivante :
document.cookie [ = name1=value1; expire=GMT_String; domain=;]
Définir la valeur du cookie
Nous devons maintenant définir deux cookies :
user_id=2;
user_name=admin;
Code JavaScript Comme suit :
document.cookie = "user_id=2";
document.cookie = "user_name=admin";
Définir l'heure d'expiration du cookie, chemin et portée
L'exemple suivant définit le délai d'expiration sur un jour, le chemin est le répertoire racine du site Web et tous les cookies sous ce nom de domaine sont partagés :
//Obtenir l'heure actuelle
var date=new Date();
date.setTime(date.getTime()+24*3600*1000);
document.cookie = "user_id=2;path=/; domain=.5idev.com;expire=" +date.toGMTString();
La définition des cookies comporte des symboles spéciaux
Points-virgules (;) ne peut pas être utilisé dans les noms ou les valeurs des cookies. , virgule (,), signe égal (=) et espaces Lorsque ces symboles doivent être conservés dans la valeur, la fonction escape() doit être utilisée pour l'encodage. symboles spéciaux en hexadécimal.
document.cookie = "test="+escape("JavaScript cookie test");
Après avoir retiré la valeur, utilisez unescape() pour la décoder afin d'obtenir la valeur d'origine du cookie. Cette Cette méthode peut également éviter efficacement les caractères chinois tronqués, etc.
Obtenir la valeur du cookie
Vous pouvez directement obtenir la valeur du cookie de la page actuelle via document.cookie, et le résultat est une chaîne. L'exemple suivant lit le cookie de la page actuelle (le cas échéant) :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>与本文档相关的 cookies（如果存在的话）：</p> <script type="text/javascript"> document.write(document.cookie) </script> </body> </html>
Fonction pour détecter la valeur du cookie
Enfin, nous pouvons créer une fonction qui détecte si un cookie a été créé.
Si des cookies sont définis, un message de bienvenue s'affichera.
Si le cookie n'est pas défini, une fenêtre pop-up s'affichera demandant 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("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}
Utilisez JavaScript pour créer des cookies
JavaScript peut utiliser l'attribut document.cookie pour créer, lire et supprimer des cookies.
En JavaScript, créez un cookie comme suit :
document.cookie="username=John Doe";
Vous pouvez également ajouter une expiration heure (en heure UTC ou GMT). Par défaut, les cookies sont supprimés à la fermeture du navigateur :
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
Vous pouvez utiliser le paramètre path pour indiquer au navigateur le chemin d'accès au cookie. Par défaut, le cookie appartient à la page actuelle.
document.cookie="username=John Doe; expires=jeudi 18 décembre 2013 12:00:00 GMT; path="/";
Utiliser JavaScript pour lire les cookies
En JavaScript, vous pouvez utiliser le code suivant pour lire les cookies :
var x = document.cookie;
Conseil : document.cookie renverra tous les cookies sous forme de chaîne, tapez format : cookie1=value ; cookie2=value ;
Modifier les cookies à l'aide de JavaScript
En JavaScript, la modification des cookies est similaire à la création de cookies, comme suit :
document.cookie= " username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
L'ancien cookie sera écrasé.
Supprimer les cookies à l'aide de JavaScript
La suppression des cookies est simple. Il vous suffit de définir le paramètre expires sur l'heure précédente, comme indiqué ci-dessous, défini sur jeu. 01 janvier 1970 00:00:00 GMT :
document.cookie = "username=; expires= Jeu. 01 janvier 1970 00:00:00 GMT";
Notez que vous n'êtes pas obligé de spécifier une valeur de cookie lorsque vous le supprimez.
Exemple complet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
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("Welcome again " + user);
}
else {
user = prompt("Please enter your name:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
