Maison > Article > interface Web > Explication détaillée des techniques Document.Cookie_javascript
Plus précisément, le mécanisme de cookie utilise une solution qui maintient l'état côté client, tandis que le mécanisme de session utilise une solution qui maintient l'état côté serveur.
Dans le même temps, nous voyons également que puisque la solution de maintien de l'état côté serveur nécessite également de sauvegarder une identité côté client, le mécanisme de session peut avoir besoin d'utiliser le mécanisme de cookie pour atteindre l'objectif de sauvegarde de l'identité. identité, mais en fait il a d’autres options.
Définir un cookie
Chaque cookie est une paire nom/valeur. Vous pouvez attribuer la chaîne suivante à document.cookie :
document.cookie="userId=828";
Si vous souhaitez stocker plusieurs paires nom/valeur en même temps, vous pouvez utiliser des points-virgules et des espaces (; ) pour les séparer, par exemple :
document.cookie="userId=828; userName=hulk";
Les points-virgules (;), les virgules (,), les signes égal (=) et les espaces ne peuvent pas être utilisés dans les noms ou les valeurs des cookies. Il est facile de faire cela au nom du cookie, mais la valeur à enregistrer n'est pas définie. Comment stocker ces valeurs ? La méthode consiste à utiliser la fonction escape() pour encoder, qui peut utiliser une représentation hexadécimale de certains symboles spéciaux. Par exemple, les espaces seront codés comme "20%", qui peuvent être stockés dans la valeur du cookie, et l'utilisation de cette solution peut être utilisée. évitez également l'émergence de caractères chinois tronqués. Par exemple :
document.cookie="str="+escape("I love ajax");
Équivalent à :
document.cookie="str=I%20love%20ajax";
Lorsque vous utilisez l'encodage escape(), vous devez utiliser unescape() pour décoder après avoir retiré la valeur afin d'obtenir la valeur originale du cookie, qui a été introduite précédemment.
Bien que document.cookie ressemble à une propriété, différentes valeurs peuvent lui être attribuées. Mais c'est différent des attributs généraux. Changer son affectation ne signifie pas perdre la valeur d'origine. Par exemple, exécuter les deux instructions suivantes en continu :
.
document.cookie="userId=828"; document.cookie="userName=hulk";
À ce stade, le navigateur conservera deux cookies, à savoir userId et userName, donc attribuer une valeur à document.cookie revient plus à exécuter une instruction comme celle-ci :
document.addCookie("userId=828"); document.addCookie("userName=hulk");
En effet, le navigateur paramétre les cookies de cette manière. Si vous souhaitez modifier la valeur d'un cookie, il vous suffit de le réaffecter, par exemple :
document.cookie="userId=929";
Cela définit la valeur du cookie nommé userId sur 929.
Obtenez la valeur du cookie
Voici comment obtenir la valeur du cookie. La valeur du cookie peut être obtenue directement depuis document.cookie :
var strCookie=document.cookie;
Cela obtiendra une chaîne composée de plusieurs paires nom/valeur séparées par des points-virgules. Ces paires nom/valeur incluent tous les cookies sous le nom de domaine. Par exemple :
<script language="JavaScript" type="text/javascript"> <!-- document.cookie="userId=828"; document.cookie="userName=hulk"; var strCookie=document.cookie; alert(strCookie); //--> </script>
La figure 7.1 montre la valeur du cookie de sortie. On peut voir que vous ne pouvez obtenir que toutes les valeurs des cookies à la fois, mais vous ne pouvez pas spécifier le nom du cookie pour obtenir la valeur spécifiée. C'est la partie la plus gênante du traitement des valeurs des cookies. Les utilisateurs doivent analyser cette chaîne eux-mêmes pour obtenir la valeur du cookie spécifiée. Par exemple, pour obtenir la valeur de userId, vous pouvez faire ceci :
.<script language="JavaScript" type="text/javascript"> <!-- //设置两个cookie document.cookie="userId=828"; document.cookie="userName=hulk"; //获取cookie字符串 var strCookie=document.cookie; //将多cookie切割为多个名/值对 var arrCookie=strCookie.split("; "); var userId; //遍历cookie数组,处理每个cookie对 for(var i=0;i<arrCookie.length;i++){ var arr=arrCookie[i].split("="); //找到名称为userId的cookie,并返回它的值 if("userId"==arr[0]){ userId=arr[1]; break; } } alert(userId); //--> </script>
De cette façon, vous obtenez la valeur d'un seul cookie. En utilisant une méthode similaire, vous pouvez obtenir la valeur d'un ou plusieurs cookies. La technique principale reste les opérations liées aux chaînes et aux tableaux.
Définir la date d'expiration du cookie
Jusqu'à présent, tous les cookies sont des cookies à session unique, c'est-à-dire que ces cookies seront perdus après la fermeture du navigateur. En fait, ces cookies sont uniquement stockés en mémoire sans créer de fichiers correspondants sur le disque dur.
Dans le développement actuel, les cookies doivent souvent être enregistrés pendant une longue période, comme par exemple l'enregistrement du statut de connexion de l'utilisateur. Ceci peut être réalisé en utilisant les options suivantes :
document.cookie="userId=828; expires=GMT_String";
Où GMT_String est une chaîne temporelle exprimée au format GMT. Cette instruction définit le cookie userId sur le délai d'expiration représenté par GMT_String. Passé ce délai, le cookie disparaîtra et deviendra inaccessible. Par exemple : Si vous souhaitez qu'un cookie expire après 10 jours, vous pouvez le faire comme ceci :
<script language="JavaScript" type="text/javascript"> <!-- //获取当前时间 var date=new Date(); var expireDays=10; //将date设置为10天以后的时间 date.setTime(date.getTime()+expireDays*24*3600*1000); //将userId和userName两个cookie设置为10天后过期 document.cookie="userId=828; userName=hulk; expire="+date.toGMTString(); //--> </script> 删除cookie 为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如: <script language="JavaScript" type="text/javascript"> <!-- //获取当前时间 var date=new Date(); //将date设置为过去的时间 date.setTime(date.getTime()-10000); //将userId这个cookie删除 document.cookie="userId=828; expire="+date.toGMTString(); //--> </script>
ps : Paramètres de fonctionnement des cookies Jquery :
Créer un cookie de session :
<script language="JavaScript" type="text/javascript"> <!-- //获取当前时间 var date=new Date(); var expireDays=10; //将date设置为10天以后的时间 date.setTime(date.getTime()+expireDays*24*3600*1000); //将userId和userName两个cookie设置为10天后过期 document.cookie="userId=828; userName=hulk; expire="+date.toGMTString(); //--> </script> 删除cookie 为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如: <script language="JavaScript" type="text/javascript"> <!-- //获取当前时间 var date=new Date(); //将date设置为过去的时间 date.setTime(date.getTime()-10000); //将userId这个cookie删除 document.cookie="userId=828; expire="+date.toGMTString(); //--> </script>
Remarque : Lorsque l'heure du cookie n'est pas spécifiée, le cookie créé sera valide jusqu'à la fermeture du navigateur de l'utilisateur par défaut, c'est pourquoi on l'appelle un cookie de session.
Créer un cookie persistant :
$.cookie(‘cookieName','cookieValue',{expires:7});
Remarque : lorsque l'heure est spécifiée, on parle de cookie persistant et la durée de validité est de jours.
Créez un cookie persistant avec un chemin valide :
$.cookie(‘cookieName','cookieValue',{expires:7,path:'/'});
注:如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。
创建一个持久并带有效路径和域名的cookie:
$.cookie(‘cookieName','cookieValue',{expires:7,path:'/',domain: ‘chuhoo.com',secure: false,raw:false});
注:domain: 创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为 false,读取和写入时候自动进行编码和解码(使用encodeURIComponent编码,使用decodeURIComponent解码),关闭 这个功能,请设置为true。
获取cookie:
$.cookie(‘cookieName'); //如果存在则返回cookieValue,否则返回null。
删除cookie:
$.cookie(‘cookieName',null);
注:如果想删除一个带有效路径的cookie,如下:$.cookie(‘cookieName',null,{path:'/'});