JavaScript Cookie 的正确用法

时间 2019-12-01

标签 javascript cookie 正确用法栏目 JavaScript 繁體版

原文原文链接

用Javascript操做cookie是经过document对象下的cookie属性，其实document.cookie就是字符串，因此咱们使用它时，能够像使用字符串同样，可使用字符串的全部方法，只不过这个字符串须要一个格式（key=value），设置cookie的示例以下：html

document.cookie = "key = escape(value)";浏览器

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

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

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

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

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

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

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

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,例如在http://localhost/APPTest/aaa/testCookie.html中设置的cookie,在http://localhost/APPTest/aaa/目录下的全部文件和http://localhost/APPTest/aaa/bbb/下的全部文件都可以访问到这个cookie,而在http://localhost/APPTest/目录下的文件就不可以访问该cookie。设置cookie时有一个path属性可以改变cookie的有效访问路径。可是目前path只能设置一个参数即"/",表明是根路径。示例代码以下：

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

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

另外在设置cookie时还可以设置两个属性，分别是domain和secure，domain表明设置cookie的访问域，下面我给出domain基本理论。
例如：www.google.com和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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie的使用实例</title>
</head>
<script>
//var Cookie_Domain = ".google.com";
function setCookie(c_name, value, expiredays){ //设置cookie函数
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) ;//+ ';domain=' + Cookie_Domain + '; path=/';
}

function getCookie(name){ //取cookies函数
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
}

function delCookie(name){ //删除cookie
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
</script>
<body>
<input type="button" value="删除COOKIE" onclick="delCookie('view_model')" />
<input type="button" value="打印COOKIE" onclick="alert(getCookie('view_model'))" />
<input type="button" value="设置COOKIE为row" onclick='setCookie("view_model", "row");' />
<input type="button" value="设置COOKIE为grid" onclick='setCookie ("view_model", "grid");' />
</body>
</html>

另外再补充一点，经过Javascript设置的cookie值，还能够经过PHP的$_COOKIE获取cookie的值。