JavaScript 操作 Cookie 完整指南：读写、解析与删除

JavaScript 操作 Cookie 完整指南：读写、解析与删除

部分网站会在用户硬盘上保存小型文本文件以存储信息，这类文件被称为 Cookie。尽管 Cookie 通常由 CGI 或比 HTML 更高级的程序生成，但 JavaScript 同样提供了完善的 Cookie 访问权限。

Cookie 基础知识

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

每个 Cookie 的结构均由两部分组成：<cookie名>=<值>。

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

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

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

使用 document.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('; ') 方法，先将 document.cookie 的值赋给变量 var cookieString，再将其分割为包含每个 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 读取的值，即可确保数据准确无误。这两个方法的主要用途正是处理 Cookie。虽然设置 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 时，函数返回其值；否则返回“null”。

现在我们要删除之前设置的 name=rose Cookie。

var expires = new Date();
expires.setTime(expires.getTime() - 1);
document.cookie = 'name=rose;expires=' + expires.toGMTString();

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