JavaScript中的cookie

在JavaScript中处理cookie有些复杂，因为其众所周知的蹩脚的接口，即BOM的document. cookie属性。这个属性的独特之处在于它会因为使用它的方式不同而表现出不同的行为。当用来获取属性值时，document.cookie返回当前页面可用的（根据cookie的域、路径、失效时间和安全设置）所有cookie的字符串，一系列由分号隔开的名值对儿，如下例所示。

  name1=value1;name2=value2;name3=value3

所有名字和值都是经过URL编码的，所以必须使用decodeURIComponent()来解码。

当用于设置值的时候，document.cookie属性可以设置为一个新的cookie字符串。这个cookie字符串会被解释并添加到现有的cookie集合中。设置document.cookie并不会覆盖cookie，除非设置的数据存储cookie的名称已经存在。设置cookie的格式如下，和Set-Cookie头中使用的格式一样。

name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure

这些参数中，只有cookie的名字和值是必需的。下面是一个简单的例子。

document.cookie = "name=Nicholas";  

这段代码创建了一个叫name的cookie，值为Nicholas。当客户端每次向服务器端发送请求的时候，都会发送这个cookie；当浏览器关闭的时候，它就会被删除。虽然这段代码没问题，但因为这里正 好名称和值都无需编码，所以最好每次设置 cookie时都像下面这个例子中一样使用 encodeURIComponent()。

document.cookie=encodeURIComponent("name")+"="+encodeURIComponent("Nicholas");

要给被创建的cookie指定额外的信息，只要将参数追加到该字符串，和SetCookie头中的格式一样，如下所示。

document.cookie=encodeURIComponent("name")+"="+encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";

由于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.toGMTStrimg();            }            if (path){                cookieText += ";domain=" + domain;            }            if (secure){                cookieText += ";secure";            }            document.cookie = cookieText;        },        unset : function (name,path,domain,secure) {            this.set(name,"",new Date(0),path,domain,secure);        }    };

CookieUtil.get()方法根据cookie的名字获取相应的值。它会在document.cookie字符串中查找cookie名加上等于号的位置。如果找到了，那么使用indexOf()查找该位置之后的第一个分号（表示了该cookie的结束位置）。如果没有找到分号，则表示该cookie是字符串中的最后一个，则余下的字符串都是cookie的值。该值使用decodeURIComponent()进行解码并最后返回。如果没有发现cookie，则返回null。

CookieUtil.set()方法在页面上设置一个cookie，接收如下几个参数：cookie的名称，cookie的值，可选的用于指定cookie何时应被删除的Date对象，cookie的可选的URL路径，可选的域，以及可选的表示是否要添加secure标志的布尔值。参数是按照它们的使用频率排列的，只有头两个是必需的。在这个方法中，名称和值都使用encodeURIComponent()进行了URL编码，并检查其他选项。如果expires参数是Date对象，那么会使用Date对象的toGMTString()方法正确格式化Date对象，并添加到expires选项上。方法的其他部分就是构造cookie字符串并将其设置到document.cookie中。

没有删除已有cookie的直接方法。所以，需要使用相同的路径、域和安全选项再次设置cookie，并将失效时间设置为过去的时间。CookieUtil.unset()方法可以处理这种事情。它接收4个参数：要删除的cookie的名称、可选的路径参数、可选的域参数和可选的安全参数。这些参数加上空字符串并设置失效时间为1970年1月1日（初始化为0ms的Date对象的值），传给CookieUtil.set()。这样就能确保删除cookie。

可以像下面这样使用上述方法。

//设置cookieCookieUtil.set("name", "Nicholas");CookieUtil.set("book", "Professional JavaScript");//读取cookie的值alert(CookieUtil.get("name")); //"Nicholalert(CookieUtil.get("book")); //"Professional JavaScript"//删除cookieCookieUtil.unset("name");CookieUtil.unset("book");//设置cookie，包括它的路径、域、失效日期   CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com",new Date("January 1, 2010"));//删除刚刚设置的cookieCookieUtil.unset("name", "/books/projs/", "www.wrox.com");    //删除刚刚设置的cookieCookieUtil.set("name", "Nicholas", null, null, null, true);

这些方法通过处理解析、构造cookie字符串的任务令在客户端利用cookie存储数据更加简单。