Javascript 操作cookie有些复杂,因为其众所周知的蹩脚的借口,即BOM的document.cookie属性。这个属性的独特之处在于它会因为使用它的方式不同而变现出不同的行为。当用来获取属性值时,document.cookie返回当前页面可用的(根据cookie的域、路径、失效时间和安全设置)所有cookie的字符串,一系列由分号隔开的名-值对,如下例所示:
name1=value1;name2=value2;name3=value3
所有名字和值都是经过URL编码的,所以必须使用decodeURIComponent()来解码。
由于Javascript中读写cookie不是非常直观,我们常写一些函数来简化cookie的功能。基本的cookie操作有三种:读取、写入和删除。它们在cookieUtil对象中如下表示:
var CookieUtil = {
get : function(name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if(cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(";", cookieStart)
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart
+ cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" +
encodeURIComponent(value);
if(expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if(path) {
cookieText += "; path=" + path;
}
if(domain) {
cookieText += "; domain=" + domain;
}
if(secure){
cookieText += "; secure=" + secure;
}
document.cookie = cookieText;
},
unset: function(name, path, domain, secure) {
this.set(name, "", new Date(0), path, domain, secure);
}
};
//--------- 下面是一些操作示例 -----------
// 设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional Javascript");
// 读值
console.log(CookieUtil.get("name"));
console.log(CookieUtil.get("book"));
// 删除
CookieUtil.unset("name"); // Nicholas
CookieUtil.unset("book"); // Professional Javascript
console.log(CookieUtil.get("name")); // null
console.log(CookieUtil.get("book")); // null
// 设置1个cookie, 包括它的路径、 域、 截止日期
CookieUtil.set("name", "Nicholas", new Date("January 1, 2013"),
"/book/projs", "www.csdn.net");
console.log(CookieUtil.get("name")); // 只有在指定的域名和路径还有过期时间下才好使
// 删除同一cookie
CookieUtil.unset("name", "/book/projs", "www.csdn.net");
console.log(CookieUtil.get("name"));
// 设置一个安全cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);
console.log(CookieUtil.get("name")); // 只有在https下才能访问到 Nicholas, 否则是 null
为了绕开浏览器的单域名下的cookie数限制,一些开发人员使用了一种称之为子cookie(subcookie)的概念。子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来存储多个名称-值对。子cookie最常见的格式如下所示:
name=name1=value1&name2=value2&name3=value3
子cookie的操作更复杂一些,详细代码参见红宝书487-491页