JavaScript 存储Cookie

Cookie

cookie是存储在客户端的计算机中的少量数据，如果服务器需要记录该用户状态，就向客户端浏览器颁发一个cookie，客户端浏览器会把cookie保存起来。

当浏览器再请求该网站时，浏览器把请求的网址连同该cookie提交给服务器。服务器检查该cookie，以此来辨认用户状态。服务器可以保存、读取、修改、删除cookie的内容。

操作cookie的API很早就已经定义并实现，但是，由于这些API并没有提供保存、读取、修改、删除的方法。所有对cookie的操作都是通过特殊格式的字符串，读写document对象的cookie属性来完成。

由于所有新旧浏览器都支持cookie，所以仍然被客户端程序员大量使用。本节将介绍如何通过Javascript 来保存、读取、修改、删除cookie的值。

存储cookie

每个cookie都是以一个名/值对形式保存的，要存储cookie，只需把document对象的cookie属性设置为一个字符串形式的值即可。如：

document.cookie = "userId=Gates";

如果要一次存储多个名/值对，名/值对之间需要使用“分号加空格”隔开。如：

document.cookie="userId=Gates; password=123";

由于cookie的名或值中不允许包含分号、逗号、等号和空格，因此在存储前，可以使用Javascript的全局函数encodeComponent()对值进行编码。

document.cookie看上去像一个属性，可以赋不同的值。但它和一般的属性不同，重复给它赋值，原来的值并不会丢失，例如，连续执行下面两条语句：

document.cookie = "userId=Gates";
document.cookie = "password=123";

这时浏览器将维护两个cookie，分别是userId和password。可以看出，document.cookie其实是一个容器，给它赋值时，如果该名不存在，则会在容器中添加一个名/值对；如果该名存在，则会修改该名所对应的值。

除了名和值，cookie还有一些可选属性，用来控制其有效期、作用域等。这些属性分别是max-age、path、domain、secure，下面分别介绍。

max-age

cookie的默认只在浏览器的会话期间有效，即浏览器关闭后，这些cookie将会丢失。可以通过设置max-age属性，来指定cookie的有效期，单位是秒。格式为：

document.cookie ="name=value; max-age=maxAge";

如果maxAge为正数，则表示该cookie在maxAge秒后被删除；如果为负数，该cookie为临时cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该cookie；如果为0，表示删除该cookie。默认为-1。

如果maxAge为正数，浏览器就会把cookie数据保存在一个文件中。无论客户关闭了浏览器还是关闭电脑，只要还在maxAge秒之前，登录网站时该cookie就仍然有效。

下面函数用来设置一个cookie的值，通过daysToLive参数设置cookie的有效天数，如果daysToLive为0，则会删除该cookie。可以看出，本函数定义的cookie，max-age属性是可选的。

function setCookie(name, value, daysToLive) {
var cookie = name + "=" + encodeComponent(value);
if(typeof daysToLive === "number")
cookie += "; max-age=" + (daysToLive*60*60*24);
document.cookie = cookie ;
}

path

默认情况下，cookie和创建它的页面有关，在某个页面创建了一个cookie，那么该页面及该页面所在目录中的其它页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。可以通过path属性来指定cookie的可见范围，格式为：

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

其中cookieDir表示可访问cookie的目录。设置path属性之后，来自同一个Web服务器的Web页面，只要其URL是以指定的路径前缀开始的，就可以共享cookie。例如，如果在http://www.xxxx.com/catalog/index.html中创建了一个cookie，并把路径设置为“/order/”，那么，该cookie对order目录及其子目录下的页面也是可见的。如果把路径设置为“/”，则该cookie对整个网站都是可见的。注意，cookieDir的最后一个字符必须是“/”。

domain

默认情况下，cookie是不能跨域名访问的，同一个域名下的两个二级域名也不能相互访问cookie，因为二者的域名并不严格相同。

但是，对于大型网站，经常需要在子域名之间共享cookie。如，order.xxx.com域名下的服务器，想读取catalog.xxx.com域名下的cookie。这时，可以通过domain属性来设置可以访问该cookie的域名。格式为：

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

其中cookieDomain表示可访问cookie的域名。如果设置为“.xxx.com”，则所有以“.xxx.com”结尾的域名都可以访问该cookie。注意，cookieDomain的第一个字符必须是“.”。

如果没有为cookie设置domain属性，则domain属性的默认值是当前的域名。并且，cookie的域名，只能设置为当前服务器的域名。

secure

HTTP协议不仅是无状态的，而且是不安全的。使用HTTP协议的数据不经过任何加密就直接在网络上传播，有被截获的危险。所以，使用HTTP协议传输机密内容会存在安全隐患。

可以通过secure属性来设置是否使用安全协议在网络上传输cookie。格式为：

document.cookie = "name=value; secure=secure";

secure属性是布尔类型，默认值为false。如果不希望cookie在HTTP等非安全协议中传输，可以设置为true。如果把secure属性设置为true，就只有当浏览器和服务器通过HTTPS或其它安全协议连接时，才能传递它。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。