JavaScript 操作 Cookie 指南：写入、读取与属性详解

JavaScript 写入 Cookie 的基本方法

var the_date = new Date("December 31, 2020");

var expiresDate = the_date.toGMTString();

document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate;

第一行代码用于创建一个指定日期的 Date 对象。

第二行将日期对象转换为 GMT 格式字符串；注：GMT 即格林威治标准时间，现常称为 UTC（协调世界时）。

第三行通过 document.cookie 属性将 Cookie 内容写入客户端浏览器。

其中 expires 是系统保留字段，用于指定 Cookie 的失效日期（该参数可省略），且 expires 的值不可通过读取 Cookie 字符串直接获取。

escape 函数用于对 Cookie 值进行编码，主要目的是支持中文、空格等特殊字符的存储。

JavaScript 读取与解析 Cookie

二、读取 Cookie 相对简单。

function GetCSS()

var cookieStr = document.cookie; // 获取 Cookie 字符串，由于 expires 不可读，因此 cookieStr 中不包含 expires 字段。

if (cookieStr == "")

return "main1"; // 若未获取到 Cookie 字符串，则返回默认值

var cookieValue = cookieStr.split("; "); // 使用分号加空格作为分隔符将 Cookie 字符串分割为数组。多个 Cookie 之间以分号加空格分隔，此处仅使用了一个 Cookie，其值与 expires 之间同样以分号加空格分隔。

var varName = "userDefineCSS";
var startPos = -1;
var endPos = -1;
for (var i=0; i<cookieValue.length; i++)
{ 
startPos = cookieValue[i].indexOf(varName);
if (startPos != 0)
{ 
continue; // 当前 Cookie 名称不匹配 varName，跳过并判断下一个
} 
startPos += varName.length + 1; // 匹配成功，由于名称后紧跟等号，故位置需加 1
endPos = cookieValue[i].length;
var css = unescape(cookieValue[i].substring(startPos, endPos));
return css;
} 
return "main1";
} 

由于写入时使用了 escape 编码，因此读取返回值时需使用 unescape 进行解码。

Cookie 的表现结构与子键

首先了解 Cookie 的表现结构。

此处讨论的 Cookie 结构并非其底层存储格式，而是其在 JavaScript 操作层面的表现结构，主要通过对表现结构的分析来实现 JS 对 Cookie 的操作。

Cookie 的表现结构较为简单，每个 Cookie 由名称和值组成，中间用等号连接。各个 Cookie 之间以分号加空格分隔。如前所述，expires、path、domain 等属性不可读，因此在表现结构中不会直接体现。

cookieName1=cookieValue1; cookieName2=cookieValue2[...; cookieNamen=cookieValuen]

通过分隔分号加空格符号，可以获取各个独立的 Cookie，再通过分隔等号，即可解析出每个 Cookie 的名称和值。

Cookie 的子键仅体现在 Cookie 值中，其结构为：子键名称=子键值，多个子键之间使用 & 连接。例如：

cookieName1=子键名称1=子键值1&子键名称2=子键值2

若涉及 ASP 文件，可能会发现 Cookie 结构中包含类似 ASPSESSIONIDQSTDRATQ=24位字符 的字符串。

关于此，查看：http://www.aspxuexi.com/aspbasic/cookie/2006-6-10/Session_Cookie.htm

Cookie 的 path 属性详解

同名 Cookie 若 domain 或 path 不同，则被视为不同的 Cookie；

同名 Cookie 若 domain 和 path 均相同，但 expires 不同，仍视为同一个 Cookie（后者覆盖前者）。

Cookie 具有路径属性——path，用于指定哪些路径下的文件有权读取该 Cookie。

path 应以 "/" 结尾。同名 Cookie 若 path 不同，则被视为不同的 Cookie。

document.cookie = "N1=1; path=/path/";

document.cookie = "N1=2; path=/path";

document.cookie = "N1=3; path=path/";

上述代码中，前两句使用绝对路径（相对于站点根目录），第三句使用相对路径（相对于当前目录）。

第一句和第二句的区别仅在于结尾是否包含 "/"。虽然两者表达的权限范围相同，但由于 path 字符串不同，系统会将其视为两个同名但不同的 Cookie，容易造成混乱。建议不要使用第二句这种格式，因为系统默认 path 即以 "/" 结尾。

因此，上述代码实际上创建了三个独立的 Cookie，它们之间不会相互覆盖。

path 属性值区分大小写，必须与浏览器地址栏中的输入保持一致。

document.cookie = "N1=1; path=/path/";

document.cookie = "N1=2; path=/paTH/";

这是两个不同的 Cookie，因为 path 属性值的大小写不同。如果在地址栏输入 path，则读取第一个 N1；若输入 paTH，则读取第二个 N1。

path 不可读。

与 expires 类似，path 属性只能写入，不可通过读取 Cookie 字符串直接获取。

path 不可直接更改。

与 expires 不同，若尝试直接修改 path，实际上是在写入一个新的 Cookie，而非更改原有 Cookie 的 path 值。

path 权限具有继承性。

若指定 /test/ 目录有权读取某 Cookie，则该目录下的子目录（如 /test/t/）也拥有读取该 Cookie 的权限。

Cookie 的 expires 属性与注意事项

Cookie 具有失效日期——expires。若未过失效期，即使重启电脑，Cookie 也不会丢失；若未指定 expires 值，则关闭浏览器时 Cookie 即失效。

在 JS 中使用 expires 时，必须与 Cookie 内容同时写入，例如：

document.cookie = "clr=red; expires=" + expiresDate;

而以下写法是不正确的：

document.cookie = "clr=red";

document.cookie = "expires=" + expiresDate;

这样写会生成两个独立的 Cookie，第二个 Cookie 的名称为 expires，且两个 Cookie 均未指定失效日期。

expires 不可读。

这就是为什么在 ASP 中使用 response.Write request.cookies("cname").expires 会报错，同样在 JS 中使用 document.cookie 读取时也不会显示 expires 字段。

expires 的值应使用 GMT 格式的时间。

var the_date = new Date("December 31, 2020");

var expiresDate = the_date.toGMTString(); // 转换为 GMT 格式。