JavaScript Cookie 设置、获取与删除完整指南

JavaScript Cookie 基础设置与获取

每个 Cookie 本质上都是一个键值对。我们可以直接将一个字符串赋值给 document.cookie 属性来创建它。

document.cookie="userId=828";

若需同时存储多个键值对，可以使用分号加空格（; ）作为分隔符。例如：

document.cookie="userId=828; userName=hulk";

需要注意的是，Cookie 的名称或值中严禁包含分号（;）、逗号（,）、等号（=）以及空格。名称通常容易处理，但值的内容往往不确定。为解决此问题，可使用 escape() 函数对值进行编码，该函数会将特殊字符转换为十六进制格式（例如空格变为“20%”），从而确保数据能正确存入 Cookie 并避免中文乱码。例如：

document.cookie="str="+escape("I love ajax");

上述代码等效于：

document.cookie="str=I%20love%20ajax";

当使用 escape() 编码后，在读取 Cookie 值时，必须使用 unescape() 进行解码，才能还原出原始的 Cookie 内容，这一过程在前文已有提及。

虽然 document.cookie 看起来像是一个普通属性，可以反复赋值，但其行为与普通属性不同。修改它的值并不会覆盖原有的 Cookie，而是追加新的记录。例如连续执行以下两条语句：

document.cookie="userId=828";

document.cookie="userName=hulk";

此时浏览器会维护两个独立的 Cookie，分别为 userId 和 userName。因此，给 document.cookie 赋值的行为更像是在执行类似以下的操作：

document.addcookie("userId=828");

document.addcookie("userName=hulk");

实际上，浏览器正是以这种方式处理 Cookie 的设置。若要修改某个特定 Cookie 的值，只需重新为其赋值即可。例如：

document.cookie="userId=929";

这样便将名为 userId 的 Cookie 值更新为 929。

接下来介绍如何读取 Cookie 的值。可以直接通过 document.cookie 属性获取：

var strcookie=document.cookie;

这将返回一个由分号分隔的字符串，包含该域名下所有的键值对。例如：

<script language="JavaScript" type="text/JavaScript">

document.cookie="userId=828";

document.cookie="userName=hulk";

var strcookie=document.cookie;

alert(strcookie);

</script>

图 7.1 展示了输出的 Cookie 值。由此可见，我们只能一次性获取所有 Cookie，无法直接通过名称指定获取单个 Cookie，这是处理 Cookie 时较为繁琐的部分。用户必须自行解析该字符串以提取特定的 Cookie 值。例如，要获取 userId 的值，可按以下方式实现：

<script language="JavaScript" type="text/JavaScript">

//设置两个cookie

document.cookie="userId=828";

document.cookie="userName=hulk";

//获取cookie字符串

var strcookie=document.cookie;

//将多cookie切割为多个名/值对

var arrcookie=strcookie.split("; ");

var userId;

//遍历cookie数组，处理每个cookie对

for(var i=0;i<arrcookie.length;i++){

var arr=arrcookie[i].split("=");

//找到名称为userId的cookie，并返回它的值

if("userId"==arr[0]){

userId=arr[1];

break;

alert(userId);

</script>

通过上述方式，即可获取单个 Cookie 的值。

采用类似的方法，可以获取一个或多个 Cookie 的值，其核心技巧依然依赖于字符串分割和数组操作。

Cookie 过期时间与删除机制

至此，所有介绍的 Cookie 均为会话级 Cookie，即浏览器关闭后这些 Cookie 便会丢失。事实上，它们仅存储在内存中，并未生成相应的硬盘文件。

在实际开发中，Cookie 通常需要长期保存，例如用于记录用户登录状态。这可以通过以下选项实现：

document.cookie="userId=828; expires=GMT_String";

其中 GMT_String 是以 GMT 格式表示的时间字符串。该语句将 userId 这个 Cookie 设置为在 GMT_String 指定的时间过期，超过该时间后 Cookie 将失效且不可访问。例如，若要将 Cookie 设置为 10 天后过期，可按以下方式实现：

 
<script language="JavaScript" type="text/JavaScript">
<!-- 
//获取当前时间
var date=new Date();
var expireDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
//--> 
</script>

若要删除某个 Cookie，可将其过期时间设置为一个过去的时间点。例如：

 
<script language="JavaScript" type="text/JavaScript">
<!-- 
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();
//--> 
</script>

Cookie 路径与域名控制

默认情况下，若在某个页面创建了 Cookie，则该页面所在目录下的其他页面也可访问该 Cookie。若该目录下包含子目录，子目录中的页面同样可以访问。例如，在 www.xxxx.com/html/a.html 中创建的 Cookie，可以被 www.xxxx.com/html/b.html 或 www.xxx.com/html/some/c.html 访问，但不能被 www.xxxx.com/d.html 访问。

为了控制 Cookie 的可访问目录，需使用 path 参数进行设置，语法如下：

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

其中 cookieDir 表示可访问 Cookie 的目录。例如：

document.cookie="userId=320; path=/shop";

表示当前 Cookie 仅能在 shop 目录下使用。

若要使 Cookie 在整个网站下可用，可将 cookie_dir 指定为根目录。例如：

document.cookie="userId=320; path=/";

与路径类似，主机名指的是同一域下的不同主机，例如 www.google.com 和 gmail.google.com 即为两个不同的主机名。默认情况下，在一个主机中创建的 Cookie 无法在另一个主机下被访问，但可以通过 domain 参数来控制其访问范围，其语法格式为：

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

以 google 为例，若要实现跨主机访问，可编写为：

document.cookie="name=value;domain=.google.com";

这样，所有 google.com 下的主机均可访问该 Cookie。

通用 Cookie 处理函数实现

综合示例：构造通用的 Cookie 处理函数

Cookie 的处理过程较为复杂且具有一定的相似性。因此，可以定义几个函数来完成 Cookie 的通用操作，从而实现代码复用。下面列出了常用的 Cookie 操作及其函数实现。

1. 添加一个 Cookie：addcookie(name,value,expireHours)

该函数接收 3 个参数：Cookie 名称、Cookie 值以及过期时间（小时）。这里约定 expireHours 为 0 时不设定过期时间，即浏览器关闭时 Cookie 自动消失。该函数实现如下：

 
<script language="JavaScript" type="text/JavaScript">
<!-- 
function addcookie(name,value,expireHours){
var cookieString=name+"="+escape(value);
//判断是否设置过期时间
if(expireHours>0){
var date=new Date();
date.setTime(date.getTime+expireHours*3600*1000);
cookieString=cookieString+"; expire="+date.toGMTString();
} 
document.cookie=cookieString;
} 
//--> 
</script>

2. 获取指定名称的 Cookie 值：getcookie(name)

该函数返回名称为 name 的 Cookie 值，若不存在则返回空字符串。其实现如下：

 
<script language="JavaScript" type="text/JavaScript">
<!-- 
function getcookie(name){
var strcookie=document.cookie;
var arrcookie=strcookie.split("; ");
for(var i=0;i<arrcookie.length;i++){
var arr=arrcookie[i].split("=");
if(arr[0]==name)return arr[1];
} 
return "";
} 
//--> 
</script>

3. 删除指定名称的 Cookie：deletecookie(name)

该函数用于删除指定名称的 Cookie，其实现如下：

 
<script language="JavaScript" type="text/JavaScript">
<!-- 
function getcookie(name){
var strcookie=document.cookie;
var arrcookie=strcookie.split("; ");
for(var i=0;i<arrcookie.length;i++){
var arr=arrcookie[i].split("=");
if(arr[0]==name)return arr[1];
} 
return "";
} 
//--> 
</script>

此外，网上还有一种流传较广的实现方式：

 
<script language="JavaScript" type="text/JavaScript">
function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{ 
var Days = 30; //此 cookie 将被保存 30 天
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
} 
function getCookie(name)//取cookies函数
{ 
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
} 
function delCookie(name)//删除cookie
{ 
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
} 
SetCookie ("xiaoqi", "3")
alert(getCookie('xiaoqi'));
</script>