Introduction aux cookies et explication détaillée du fonctionnement des cookies à l'aide de JavaScript

Cet article présente principalement brièvement les utilisations et les mécanismes de fonctionnement des cookies suivants, ainsi que diverses méthodes d'utilisation de JavaScript pour faire fonctionner les cookies. Le résumé est relativement complet et j'espère qu'il pourra être utile à tout le monde.

Que sont les cookies

« Un cookie est une variable qui est stockée sur l'ordinateur d'un visiteur chaque fois que le même ordinateur demande quelque chose via un navigateur. Ce cookie est envoyé lorsqu'une page est ouverte. Vous pouvez utiliser JavaScript pour créer et récupérer la valeur du cookie. » – w3school

Les cookies sont des fichiers créés par les sites Web visités pour stocker des informations de navigation, telles que des informations de profil. .

Du point de vue JavaScript, les cookies ne sont que quelques informations sous forme de chaîne. Ces informations sont stockées sur l'ordinateur du client et sont utilisées pour transférer des informations entre l'ordinateur client et le serveur.

Ces informations peuvent être lues ou définies via document.cookie en JavaScript. Étant donné que les cookies sont principalement utilisés pour la communication entre le client et le serveur, outre JavaScript, les langages côté serveur (tels que PHP) peuvent également accéder aux cookies.

Connaissance de base des cookies

Les cookies ont une limite de taille. Les données stockées dans chaque cookie ne peuvent pas dépasser 4 Ko. Si la longueur de la chaîne du cookie dépasse 4 Ko, la Propriété. renverra une chaîne vide.

Étant donné que les cookies sont finalement stockés dans l'ordinateur client sous forme de fichiers, il est très pratique de visualiser et de modifier les cookies. C'est pourquoi on dit souvent que les cookies ne peuvent pas stocker d'informations importantes.

Le format de chaque cookie est le suivant : b6595f9433ba70b4aed8f4a42365c43b=f9482282c4721b471ae3bda276838dca; le nom et la valeur doivent être des identifiants légaux.

Les cookies ont une date d'expiration. Par défaut, le cycle de vie d'un cookie se termine à la fermeture du navigateur. Si vous souhaitez que le cookie soit utilisable après la fermeture du navigateur, vous devez définir une période de validité pour le cookie, qui correspond à la date d'expiration du cookie.

alert(typeof document.cookie) Le résultat est une chaîne. J'ai déjà pensé que c'était un tableau, et j'ai même fait une blague...囧

Cookie a le concept de domaine et de chemin. Le domaine est le concept de domaine Étant donné que le navigateur est un environnement soucieux de la sécurité, différents domaines ne peuvent pas accéder aux cookies les uns des autres (bien entendu, l'accès entre domaines aux cookies peut être obtenu via des paramètres spéciaux). Le chemin est le concept de routage. Un cookie créé par une page Web n'est accessible que par toutes les pages Web du même répertoire ou sous-répertoire que cette page Web, mais n'est pas accessible par les pages Web d'autres répertoires (cette phrase est un peu déroutante, je vais regarder). nous y reviendrons plus tard) C’est plus facile à comprendre avec un exemple).

En fait, la manière de créer des cookies est quelque peu similaire à la manière de définir des variables. Les deux nécessitent l'utilisation de noms de cookies et de valeurs de cookies. Le même site Web peut créer plusieurs cookies, et plusieurs cookies peuvent être stockés dans le même fichier de cookies.

FAQ sur les cookies

Il existe deux types de cookies :

Cookies définis par le site Web actuel sur lequel vous naviguez

De troisième -des cookies provenant d'autres domaines tels que des publicités ou des images intégrées sur des pages Web (les sites Web peuvent suivre vos informations d'utilisation en utilisant ces cookies)

Tout à l'heure, les connaissances de base mentionnaient la question du cycle de vie des cookies. peut grossièrement Divisé en deux états :

Cookie temporaire. Le site Web stockera certaines de vos informations personnelles lors de l'utilisation en cours, et ces informations seront également supprimées de l'ordinateur à la fermeture du navigateur

Cookies avec délai d'expiration défini. Même si le navigateur est fermé, ces informations seront toujours présentes sur l'ordinateur. Tels que le nom de connexion et le mot de passe, vous n'avez donc pas besoin de vous connecter à chaque fois que vous accédez à un site spécifique. Ce cookie peut rester sur votre ordinateur pendant des jours, des mois, voire des années.

Il existe deux manières d'effacer les cookies :

Effacer les cookies via les outils du navigateur (il existe des tiers). outils de fête, le navigateur lui-même a également cette fonction)

Effacer les cookies en définissant la période de validité des cookies

Remarque : la suppression des cookies peut parfois entraîner un dysfonctionnement de certaines pages Web

Les navigateurs peuvent être configurés pour accepter et refuser l'accès aux cookies.

Pour des raisons de fonctionnalité et de performances, il est recommandé de réduire le nombre de cookies utilisés et d'essayer d'utiliser de petits cookies.

Les détails sur le codage des cookies seront introduits séparément dans le chapitre sur les cookies avancés.

S'il s'agit d'une page sur le disque local, la console Chrome ne peut pas utiliser JavaScript pour lire et écrire des cookies. La solution... changer de navigateur^_^.

Utilisation de base des cookies

1. Opérations d'accès simples

Lorsque vous utilisez JavaScript pour accéder aux cookies, vous devez utiliser l'attribut cookie de l'objet Document. ; Une ligne de code présente comment créer et modifier un cookie :

document.cookie  = 'username=Darren';

Dans le code ci-dessus, 'username' représente le nom du cookie, et 'Darren' représente la valeur correspondant à ce nom. Si le nom du cookie n'existe pas, alors un nouveau cookie est créé ; s'il existe, la valeur correspondant au nom du cookie est modifiée. Si vous souhaitez créer des cookies plusieurs fois, utilisez simplement cette méthode à plusieurs reprises.

2. Opération de lecture des cookies

要精确的对 cookie 进行读取其实很简单，就是对字符串进行操作。从w3school上copy这段代码来做分析：

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　
　　　　　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){ 
　　　　　　　　c_start=c_start + c_name.length+1　　
　　　　　　　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　
　　　　　　　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...
　　　　　　　　这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　
　　　　　　　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，
　　　　　　　　想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
　　　　　　} 
　　　　}
　　　　return ""
　　}

当然想实现读取cookie的方法还有不少，比如数组，正则等，这里就不往细说了。

三.设置cookie的有效期

文章中常常出现的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在时间。在默认的情况下，cookie 会在浏览器关闭的时候自动清除，但是我们可以通过expires来设置 cookie 的有效期。语法如下：

document.cookie = "name=value;expires=date";

上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString();

上面三行代码分解为几步来看：

通过new生成一个Date的实例，得到当前的时间；

getDate()方法得到当前本地月份中的某一天，接着加上30就是我希望这个cookie能过在本地保存30天；

接着通过setDate()方法来设置时间；

最后 用toGMTString()方法把Date对象转换为字符串，并返回结果

通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 – 从w3school复制下来的。创建一个在 cookie 中存储信息的函数：

function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";
    expires="+exdate.toGMTString());
}
//使用方法：setCookie('username','Darren',30)

现在我们这个函数是按照天数来设置cookie的有效时间，如果想以其他单位（如：小时）来设置，那么改变第三行代码即可：

exdate.setHours(exdate.getHours() + expiredays);

这样设置以后的cookie有效期就是按照小时为单位的。

常见问题中有提到清除 cookie 的两种方法，现在要说的是使 cookie 失效，通过把有效期的时间设置为一个已过期的时间。既然已经有了设置有效期的方法，那么设置失效期的方法就请感兴趣的朋友自己动手了^_^。下面继续比较深的cookie话题。

Cookie 高级篇

一.cookie 路径概念

在基础知识中有提到 cookie 有域和路径的概念，现在来介绍路径在 cookie 中的作用。

cookie 一般都是由于用户访问页面而被创建的，可是并不是只有在创建 cookie 的页面才可以访问这个 cookie。

默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问，这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 cookie。举个例子：

在 “http://www.php.cn/” 这个页面创建一个cookie，那么在”/Darren_code/”这个路径下的页面如： “http://www.php.cn/”这个页面默 认就能取到cookie信息。

可在默认情况下， “http://www.php.cn/”或者 “http://www.php.cn/” 就不可以访问这个 cookie（光看没用，实践出真理^_^）。

那么如何让这个 cookie 能被其他目录或者父级的目录访问类，通过设置 cookie 的路径就可以实现。例子如下：

document.cookie = "name=value;path=path"
document.cookie = "name=value;expires=date;path=path"

红色字体path就是 cookie 的路径，最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了:

document.cookie = "name=Darren;path=/";

二.cookie 域概念

路径能解决在同一个域下访问 cookie 的问题，咱们接着说 cookie 实现同域之间访问的问题。语法如下：

document.cookie = "name=value;path=path;domain=domain";

红色的domain就是设置的 cookie 域的值。

例如 ”www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”，我们如果想让 “sports.qq.com” 下的cookie被 ”www.qq.com” 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 “/”。例：

document.cookie = "username=Darren;path=/;domain=qq.com";

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了，囧…

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识，因为如果对这个不了解的话编码问题确实是一个坑，所以还是详细说说。

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

document.cookie = name + "="+ escape (value);

再看看基础用法时提到过的getCookie()内的一句：

return unescape(document.cookie.substring(c_start,c_end));

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

个人代码

/*设置Cookie*/
function setCookie(c_name, value, expiredays, path, domain, secure) {　
 var exdate = new Date(); //获取当前时间　
 exdate.setDate(exdate.getDate() + expiredays);　 //过期时间　　
 document.cookie = c_name + "=" + //cookie名称
 escape(value) + //将cookie值进行编码
 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + //设置过期时间
 ((path == null) ? '/' : ';path=' + path) + //设置访问路径
 ((domain == null) ? '' : ';domain=' + domain) + //设置访问域
 ((secure == null) ? '' : ';secure=' + secure);　 //设置是否加密
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);
/*获取Cookie*/
function getCookie(c_name, index) {
 var cookies = document.cookie; //获取cookie值
 var cookieLen = cookies.length; //获取cookie长度
 if (cookieLen > 0) { //cookie不为空时
  var c_start = cookies.indexOf(c_name + '='); //查找需要cookie值在cookie中序号
  if (c_start > -1) { //cookie值存在时
   c_start += c_name.length + 1; //获取cookie值开始序列号
   var c_end = cookies.indexOf(';', c_start); //获取cookie值结束序列号
   if (c_end == -1) { //当cookie是最后一个时
    c_end = cookieLen; //设置cookie值结束序列号为cookie长度
   };
   var cookieStr = unescape(cookies.substring(c_start, c_end)); //获取解码cookie值
   var cookieObj = cookieStr.split(';'); //分割cookie值
   index = ((index == null) ? 0 : index); //判断index是否传值
   var goalObj = cookieObj[index]; //索引数组
   var goalStr = goalObj.split('=');
   var getcook = goalStr[1]; //获取需要取的cookie值
   return getcook;
  };
 } else {
  console.log('页面没有cookie');
 }
};
alert(getCookie('test', 0)); //打印查询cookie值

 以上就是Cookie介绍及JavaScript操作Cookie方法详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！