JavaScript Cookie 的正确用法-白红宇

JavaScript Cookie 的正确用法

阅读量：6443 次

发布时间：2019-06-23

本文共 4566 字，大约阅读时间需要 15 分钟。

用Javascript操作cookie是通过document对象下的cookie属性，其实document.cookie就是字符串，所以我们使用它时，可以像使用字符串一样，可以使用字符串的所有方法，只不过这个字符串需要一个格式（key=value），设置cookie的示例如下：

document.cookie = "key = escape(value)";

cookie的值不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的变量名中做到这一点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码，escape能将一些特殊的符号使用十六进制表示，例如空格将会编码为"20%"，从而可以存储于cookie值中，而且使用此方法方案还可以避免中文乱码的出现。另外，value上使用了escape方法，在取值时需要unescape(value)对value在进行转码即可。

若要设置多个cookie，则需要多次使用document.cookie方法。示例如下：

document.cookie = "key1 = escape(value1)";

document.cookie = "key2 = escape(value2)";

而不是将两个cookie值连在一起，document.cookie = "key1 = escape(value1); key2 = escape(value2)"; 这样的写法是错误的。

如果想要取出cookie的值，可以直接调用document.cookie获得，如果有多个值，多个值用分号( ; )分隔，每个值用（=）分隔，我们可以对cookie先进行按照分号（；）进行分隔；然后再按照等号分隔。然后循环比较key的值，如果key的相等，则取出value。需要注意的一点，如果有多个值，第二个值的key值前面要多一个空格，需要去除。下面是获取cookie的示例代码：

function getCookie(key){

var aCookie = document.cookie.split(";");

for (var i=0; i < aCookie.length; i++){

var aCrumb = aCookie[i].split("=");

if (key === aCrumb[0].replace(/^\s*|\s*$/,"")){

return unescape(aCrumb[1]);

}

经过前面的示例在一个页面设置cookie后在另一个页面也能取到，但是cookie存在哪里呢？通常情况下，cookie会存放在C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files目录下。但是我们删除了这个文件夹下的所有文件后，再获得cookie,还能够访问到。关闭浏览器后，再次打开浏览器后还能获得到 cookie。那cookie的默认生存期是多久呢。怎么才能清除cookie呢。非常抱歉，我也不知道存哪了，但是只要注销或重启之后，设置的 cookie将销毁。我们可以通过设置cookie时可以传递一个属性expires，该属性的作用是设置cookie的生存期。设置cookie的生存期的示例代码如下：

var liveDate = new Date();

liveDate.setTime(liveDate.getTime() + 3*24*60*60*1000);

document.cookie="name=test;expires=" + liveDate.toGMTString();

上面代码设置cookie的name的存活时间为3天。删除cookie的值就是设置expires一个过期的时间即可，示例代码如下

var liveDate = new Date();

liveDate.setTime(liveDate.getTime() - 10000);

document.cookie = "name=test;expires=" + date.toGMTString();

但是有趣的是，设置了expires属性后，我们在C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files目录下发现有存储cookie的文件。此时我们删除该文件后，发现设置的cookie确实销毁了。这正符合我们的要求。所以建议用js设置 cookie的时候一定要设置expires属性，正常来说我们要用到cookie的时候就应该根据需求明确设计cookie存活多久。

下面我们再说一下js操作cookie的作用域。默认情况下js操作cookie的作用域是目录级的，也就是在当前目录下设置的cookie，当前目录及该目录下的所有子目录下的所有文件都能够访问该cookie,例如在中设置的cookie,在目录下的所有文件和下的所有文件都能够访问到这个cookie,而在目录下的文件就不能够访问该cookie。设置cookie时有一个path属性能够改变cookie的有效访问路径。但是目前path只能设置一个参数即"/",代表是根路径。示例代码如下：

document.cookie="key=escape(value);path=/";

如果设置了path="/"，则不管设置cookie在哪个路径，在

下及所有目录及子目录下都能够访问到这个cookie.理论上如果设置path="\aaa",该cookie的作用域应该是aaa目录下及aaa目录下的所有子目录下都能够访问到这个cookie,但实际上并没有实现这样的功能，我认为这也是js实现cookie的一个bug。这里有两个问题需要注意，一是如果设置两个同名的cookie,如下设置了两个cookie,一个设置了path为"/"，另一个cookie不带path参数,那么在会访问到两个同名的cookie值，而在路径为只能访问到全局的cookie值。但是我们没有办法通过路径去区分。第二个需要注意的就是删除cookie,如果设置cookie时带path属性，那么在删除的时候一定要加上path属性，否则删除的是当前目录下设置的cookie值。

另外在设置cookie时还能够设置两个属性，分别是domain和secure，domain代表设置cookie的访问域，下面我给出domain基本理论。

例如：和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：

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

以google为例，要实现跨主机访问，可以写为：

document.cookie="name=value;domain=.google.com";

这样，所有google.com下的主机都可以访问该cookie。因为这个参数我没有测试过也没有用过，所以如果当用到这个参数，可以参考上面的理论部分。

secure代表该cookie是否是安全的。如果设置了该属性，只有使用https协议才能够访问到该cookie.

下面给出cookie的完整格式

name=[; expires=][; domain=][; path=][; secure]

名称=<值>[; expires=<日期>][; domain=<域>][; path=<路径>][; 安全]

实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">