JavaScript Cookie 操作指南：读写、过期与删除

JavaScript Cookie 基础概念

在 document 对象中存在一个 cookie 属性。那么 Cookie 究竟是什么？根据 MSIE 帮助文档的定义，某些 Web 站点会在用户硬盘上存储一些小型文本文件，这些文件即被称为 Cookie。尽管 Cookie 通常由 CGI 或比 HTML 更高级的程序创建，但 JavaScript 同样提供了对 Cookie 的全面访问权限。

在深入技术细节之前，我们需要先了解 Cookie 的基础知识。

每个 Cookie 都遵循特定的格式：<cookie名>=<值>。

<cookie名>的限制条件与 JavaScript 变量命名规则相似，区别在于不能包含 JavaScript 关键字，且必须仅使用 URL 编码允许的字符。这一要求可能较为晦涩，但只要命名仅包含字母和数字，即可避免问题。<值>同样要求仅使用 URL 编码允许的字符。

每个 Cookie 都设有失效日期。当系统时间超过该日期时，Cookie 将被自动删除。虽然无法直接删除 Cookie，但可以通过将失效日期设置为当前时间之前的方法来实现间接删除。

每个网页或站点拥有独立的 Cookie 集合，这些 Cookie 仅能由该站点下的网页访问，其他站点或同一站点下未授权区域的网页无法访问。每组 Cookie 有总大小限制（约 2KB），一旦超出最大总大小，最早失效的 Cookie 将被优先删除，以便为新 Cookie 腾出空间。

读取 Cookie 数据

接下来，我们将学习如何使用 document.cookie 属性。

如果直接使用 document.cookie 属性，或通过变量赋值等方式获取其值，我们可以得知当前文档中包含的 Cookie 数量、名称及值。例如，在文档中添加“document.write(document.cookie)”后，显示结果如下：

name=kevin; email=kevin@kevin.com; lastvisited=index.html

这表明文档包含 3 个 Cookie：name、email 和 lastvisited，其值分别为 kevin、kevin@kevin.com 和 index.html。可以看到，Cookie 之间使用分号和空格分隔，因此我们可以使用 cookieString.split('; ') 方法将每个 Cookie 分离为数组（首先需执行 var cookieString = document.cookie）。

设置 Cookie 与关键参数

设置 Cookie 的方法是对 document.cookie 进行赋值。与其他赋值操作不同，向 document.cookie 赋值不会删除现有 Cookie，而是添加新 Cookie 或更新现有 Cookie。赋值格式如下：

document.cookie = 'cookieName=' + escape('cookieValue')

+ ';expires=' + expirationDateObj.toGMTString();

上述代码中，非粗体部分需原样抄写，粗体部分需根据实际情况进行修改。cookieName 表示 Cookie 的名称，cookieValue 表示 Cookie 的值，expirationDateObj 表示存储失效日期的日期对象名。如果不需要指定失效日期，则无需第二行。若不指定失效日期，浏览器默认在关闭所有窗口（即关闭浏览器）后使 Cookie 过期。

注意上述代码中的下划线部分，这些是需要特别注意的地方。

首先是 escape() 方法：为何必须使用它？因为 Cookie 的值要求“仅能使用 URL 编码允许的字符”。我们知道 escape() 方法按 URL 编码规则对字符串进行编码，因此只需使用 escape() 处理输出到 Cookie 的值，并使用 unescape() 处理从 Cookie 接收的值，即可确保万无一失。这两个方法的主要用途就是处理 Cookies。实际上，设置 Cookie 仅相当于“document.cookie = 'cookieName=cookieValue'”，但为了避免 cookieValue 中出现 URL 不允许的字符，使用 escape() 更为稳妥。

其次是“expires”前的分号：只需注意即可，它是分号而非其他符号。

最后是 toGMTString() 方法：设置 Cookie 的时效日期必须使用 GMT 格式的时间，其他格式的时间无效。

实战：设置带过期时间的 Cookie

现在我们来实战一下。设定一个“name=rose”的 Cookie，并在 3 个月后过期。

var expires = new Date();

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

/* 三个月 x 一个月当作 30 天 x 一天 24 小时

x 一小时 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */

document.cookie = 'name=rose;expires=' + expires.toGMTString();

为何未使用 escape() 方法？因为我们知道 rose 是一个合法的 URL 编码字符串，即 'rose' == escape('rose')。一般来说，如果设置 Cookie 时不使用 escape()，那么获取 Cookie 时也不需要使用 unescape()。

获取指定 Cookie 值的函数实现

再来一次：编写一个函数，用于查找指定 Cookie 的值。

function getCookie(cookieName) {

var cookieString = document.cookie;

var start = cookieString.indexOf(cookieName + '=');

// 加上等号的原因是避免在某些 Cookie 的值里有

// 与 cookieName 一样的字符串。

if (start == -1) // 找不到

return null;

start += cookieName.length + 1;

var end = cookieString.indexOf(';', start);

if (end == -1) return unescape(cookieString.substring(start));

return unescape(cookieString.substring(start, end));

该函数使用了字符串对象的一些方法，如果您已遗忘（您是否记性不佳？），请查阅相关文档。该函数所有 if 语句均未包含 else，因为如果条件成立，程序执行的是 return 语句。在函数中遇到 return 时，运行将终止，因此无需添加 else。当找到 Cookie 时，该函数返回 Cookie 的值；否则返回“null”。

删除 Cookie 的方法

现在我们要删除刚才设定的 name=rose Cookie。

var expires = new Date();

expires.setTime(expires.getTime() - 1);

document.cookie = 'name=rose;expires=' + expires.toGMTString();

可以看到，只需将失效日期设置为比当前时间稍早（此处为早 1 毫秒），再使用相同的方法设置 Cookie，即可删除 Cookie。