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

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é.

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="+字符串格式的时间;

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

5.

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

<!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>

【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!