Comment implémenter le fonctionnement des cookies en javascript

Méthode : 1. Utilisez l'instruction "document.cookie="name=value;"" pour définir le cookie ou modifier la valeur du cookie ; 2. Utilisez l'instruction "document.cookie" pour obtenir la valeur du cookie ; la durée de validité "expire". Réglez sur la valeur d'expiration pour supprimer le cookie.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Les cookies sont des variables stockées sur l'ordinateur d'un visiteur Lorsqu'un utilisateur visite un site Web, des données peuvent être stockées sur l'ordinateur du visiteur via des cookies. Plus tard, lorsque l'utilisateur demande à nouveau la page via le navigateur du même ordinateur, ce cookie est envoyé et le cookie peut être utilisé pour identifier l'utilisateur.

1. Définir des cookies

L'utilisation de cookies pour stocker des données est obtenue en définissant des cookies. Chaque cookie est une paire nom/valeur. Les paires nom/valeur sont connectées par un signe égal et la paire nom/valeur est attribuée à document.cookie. Plusieurs paires nom/valeur peuvent être attribuées à document.cookie en même temps, en utilisant des points-virgules et des espaces pour séparer chaque paire nom/valeur.

Le format de base du paramétrage des cookies est le suivant :

document.cookie = "名称1=值1[; 名称2=值2; …]";

L'exemple de paramétrage des cookies est le suivant :

document.cookie = "username=abc";
document.cookie = "age=23";
document.cookie = "username=abc; age=23";

Il est à noter que les points-virgules et les signes égal = et autres symboles ne peuvent pas être utilisés dans le nom ou la valeur de cookies. Si vous souhaitez stocker ces symboles, vous devez utiliser la fonction escape() pour l'encodage. Par exemple : document.cookie="str="+escape("username=nch"), ce code est équivalent à : document.cookie="str=username%3Dnch", c'est-à-dire que le signe égal est codé en %3D . Lorsque vous utilisez l'encodage escape(), vous devez utiliser unescape() pour décoder après avoir retiré la valeur afin d'obtenir la valeur d'origine du cookie.

De plus, lorsque la valeur du cookie défini en utilisant le format ci-dessus est stockée dans l'ordinateur de l'utilisateur, les données des différents sites Web sont distinguées sous la forme de nom de domaine de site Web, et différents navigateurs stockent les cookies à différents endroits, donc différents navigateurs store Les cookies ne sont pas mutuellement accessibles. De plus, il existe une limite au nombre de cookies stockés sous le même nom de domaine, et différents navigateurs ont des limites différentes quant au nombre de cookies stockés. De plus, la taille du contenu stocké dans chaque cookie est également limitée et différents navigateurs ont des limites de taille différentes.

2. Modifier la valeur du cookie

Si vous souhaitez modifier une valeur de cookie, réattribuez-la simplement, par exemple : document.cookie="age=36"; De cette façon, vous pouvez modifier la valeur du cookie. paramètres précédents La valeur du cookie est age=23. document.cookie="age=36";这样就可以修改前面设置的 age=23 的 cookie 值。

3. 获取cookie

通过 document.cookie

3. Obtenir des cookies

Lorsque vous utilisez document.cookie pour obtenir les cookies sous le site Web actuel, vous obtiendrez une valeur sous la forme d'une chaîne, qui contient tous les cookies sous le site Web actuel. Il concatènera tous les cookies via un point-virgule + un espace.

Pour obtenir différentes valeurs de cookie, vous pouvez utiliser la méthode split() pour convertir la chaîne contenant des points-virgules et des espaces en un tableau de chaînes séparés par des points-virgules, puis parcourir le tableau de chaînes pour obtenir chaque paire nom/valeur, utilisez le split( ) pour convertir cette paire nom/valeur en un tableau contenant le nom et la valeur séparés par des signes égaux, et vous pouvez obtenir la valeur du nom de cookie spécifié.

Par exemple, le code pour obtenir la valeur du cookie nommé age est le suivant :

document.cookie = "username=abc; age=23";
var arr1 = document.cookie.split(';');
for(var i = 0; i < arr1.length; i++){
     var arr2 = arr1[i].split(&#39;=&#39;);
     if(arr2[0] == &#39;age&#39;){
         alert(arr2[1]);
     }
}

4 Définir la durée de validité du cookie

Par défaut, les cookies sont stockés temporairement, c'est-à-dire qu'ils sont stockés. sont en mémoire par défaut et ne sont pas stockés sur le disque dur, de sorte que les cookies stockés seront automatiquement détruits après la fermeture du processus de navigation. Si vous souhaitez enregistrer des cookies sur votre ordinateur pour une durée déterminée ou permanente, vous devez définir une durée de validité lors de la configuration du cookie. Le format de paramétrage est le suivant :

document.cookie = "名称=值;expires="+字符串格式的时间;

Par exemple :

var oDate = new Date();
oDate.setDate(oDate.getDate()+10);//访问页面后的10天过期
//设置cookie的有效时间，时间为字符串格式
document.cookie = 'username=abc;expires='+oDate.toGMTString();

5.

Supprimez directement le cookie. L'heure effective peut être réglée sur une certaine heure dans le passé. Par exemple :

var oDate = new Date();
oDate.setDate(oDate.getDate()-1);//访问页面的前一天
document.cookie = 'username=abc;expires='+oDate.toGMTString();

【Exemple 1】Utiliser le document pour gérer les cookies.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用cookie记住登录用户名</title>
<script>
     window.onload = function(){
         var oUsername = document.getElementById(&#39;username&#39;);
         var oLogin = document.getElementById(&#39;login&#39;);
         var oDel = document.getElementById(&#39;del&#39;);
         //判断用户是否曾经登录过
         if(getCookie(&#39;username&#39;)){
              oUsername.value = getCookie(&#39;username&#39;);
         }
         //定义一个函数来获取指定名称的cookie值：
         function getCookie(key){
              var arr1 = document.cookie.split(&#39;;&#39;);
              for(var i = 0; i < arr1.length; i++){
                  var arr2 = arr1[i].split(&#39;=&#39;);
                  if(arr2[0] == key){
                       return unescape(arr2[1]);//对编码后的内容进行解码
                  }           
              }
         }    
         //定义一个函数来设置cookie,同时设置cookie的有效时间
         function setCookie(key,value,t){
              var oDate = new Date();
              oDate.setDate(oDate.getDate()+t);
              //使用escape()对内容进行编码
              document.cookie = key+&#39;=&#39;+escape(value)+&#39;;expires=&#39;+oDate.toGMTString();         
         }    
         //定义一个函数移除cookie
         function removeCookie(key){
              setCookie(key,&#39;&#39;,-1);
         }
         oLogin.onclick = function(){
              alert(&#39;登录成功&#39;);
              //将输入的用户名存储在cookie中，且在登录5天后cookie过期
              setCookie(&#39;username&#39;,oUsername.value,5);
         }
         oDel.onclick = function(){
              removeCookie(&#39;username&#39;);
              oUsername.value = &#39;&#39;;//移除cookie后清空文本框内容
         }
     };
</script>
</head>
<body>
     <input type="text" id="username"/>
     <input type="button" value="登录" id="login"/>
     <input type="button" value="删除用户名cookie" id="del"/>
</body>
</html>

Remarque : Firefox et IE n'autorisent que le fonctionnement temporaire des cookies localement, et les cookies ne peuvent pas être obtenus après la fermeture du navigateur. Chrome, en revanche, ne permet pas la manipulation locale des cookies. Lorsque l'exemple 1 est publié sur un serveur Web puis consulté, ces navigateurs peuvent manipuler les cookies.
L'image ci-dessous montre les résultats de l'accès et de la publication sur le serveur Web Tomcat dans le navigateur Chrome et du clic sur le bouton de connexion et le bouton Supprimer après avoir entré le nom d'utilisateur (le serveur Tomcat est sur cette machine, vous pouvez donc utiliser localhost comme nom de domaine) y accéder).

🎜🎜🎜🎜Après avoir entré le nom d'utilisateur, cliquez sur le bouton de connexion, fermez le processus du navigateur Chrome avant de cliquer sur le bouton de suppression du cookie du nom d'utilisateur, puis ouvrez à nouveau Chrome pour accéder à l'exemple 1, vous pouvez obtenir les résultats affichés dans la figure 3 , c'est-à-dire que le nom d'utilisateur sera automatiquement affiché dans la zone de texte. Si vous cliquez sur le bouton Supprimer le cookie du nom d'utilisateur, fermez le processus du navigateur Chrome, puis ouvrez à nouveau Chrome pour accéder à l'exemple 1, vous obtiendrez le résultat présenté dans la figure 4. À ce stade, le nom d'utilisateur stocké dans le cookie a été supprimé et ne peut pas être affiché. 🎜

【Apprentissage recommandé : Tutoriel avancé javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!