JavaScript： Cookie 详解、实例与应用
Cookie（也）是JavaScript中的一种机制，可以实现严格的跨页面全局变量的要求。
Cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。
在Cookie设置中，用escape()函数进行编码，可避免乱码和特殊字符问题; 当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。
设置Cookie时可以直接给document.cookie赋值：
document.cookie="userId=828";2
document.cookie="userName=hulk";
而且后面的值不会覆盖前面的值，它具有一种累加机制。
cookie的值可以由document.cookie直接获得，但这样获取的是所有的cookie值；要通过一指定cookie名称来获得所对应的值，则需做一些处理。
构造通用的cookie处理函数：
<script type="text/javascript">2
/***
3
* 设置Cookie （通用函数）4
* @param {string} cookieName Cookie 名称5
* @param {string} cookieValue Cookie 值6
* @param {string} nDays Cookie 过期天数7
*/8
function SetCookie(cookieName, cookieValue, nDays)9
{
10
/* 当前日期 */
11
var today = new Date();12
13
/* Cookie 过期时间 */14
var expire = new Date();15
16
/* 如果未设置nDays参数或者nDays为0，取默认值 1 */17
if(nDays == null || nDays == 0) 18
nDays = 1;19
20
/* 计算Cookie过期时间 */21
expire.setTime(today.getTime() + nDays * 24 * 60 * 60 * 1000); //获取毫秒数22
23
/* 设置Cookie值 */24
document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString();25
} 26
下面我来编写一个登录函数，加强理解和应用
// 登录函数2
function login()3
{4
// 用户名5
var username = $("user").value;6
7
// 用户密码8
var password = $("pass").value;9
10
// 我们这里设置一额外条件，交友登录用户选择11
// 是否7天内无需再登录，即可访问12
var save = $("save").checked;13
14
// 这里，假设一合法的用户名/密码是 admin/admin15
if(username == "admin" && password == "admin")16
{17
// 在Cookie中保存用户名18
if(save) 19
SetCookie("username",username,7);20
else21
SetCookie("username",username,1);22
23
// 通过验证，跳转到下一页面24
document.location = "page2.html";25
}26
else27
{28
alert("用户名或密码错误！");29
}30
}31
32
function $(id)33
{34
return document.getElementById(id);35
}36
37
</script>
调用（或称 嵌入）以上Js代码的页面文件，如下：
//Page1.html 的 body 部分，其他省略2
<body>3
<div id="main">4
<div>5
<span>用户名：</span> <input type="text" id="user" />6
</div>7
<div>8
<span>密 码：</sapn> <input type="password" id="pass" />9
</div> 10
<div>11
<input type="checkbox" id="save" /> 七天内无需登录12
</div>13
<div>14
<input type="button" onclick="login()" value="登 录" />15
</div>16
</body>
页面效果 如下所示：
前面讲到
“
设置Cookie时，可以直接给 document.cookie 赋值：
document.cookie="userId=828";
document.cookie="userName=hulk";
而且后面的值不会覆盖前面的值，它具有一种 累加机制。
”
Page2.html内部页面（你可以先这样理解），必须在登录后才能使用。该页面需要对用户当前PC的Cookie进行判断，如果发现用户已经通过该机器登录过，该页面则显示 欢迎信息，否则显示“请登录”的链接。
Page2.html页面的代码如下（下面分开说明）：
（1） Js代码 （通用读取Cookie方法）：
<script type="text/javascript"> /*** * 读取指定的Cookie值 * @param {string} cookieName Cookie名称 */ // 方法一： function GetCookie(cookieName) { /* Cookie 字符串 */ var theCookie = "" + document.cookie; /* 找到cookieName的位置 */ var ind = theCookie.indexOf(cookieName); /* 如果未找到cookieName，返回空字符串 */ if(ind == -1 || cookieName == "") return ""; /* 确定分号的位置 */ var ind1 = theCookie.indexOf(';', ind); if(ind1 == -1) ind1 = theCookie.length; /* 读取Cookie值 */ return unescape(theCookie.substring(ind+cookieName.length + 1, ind1)); } // 方法二： function GetCookie(cookieName) { var strCookie=document.cookie; // 将多cookie切割为多个名/值对 var arrCookie=strCookie.split("; "); for(var i=0;i<arrCookie.length;i++) { // 遍历cookie数组，处理每个cookie对 var arr=arrCookie[i].split("="); // 找到名称为cookieName的cookie，并返回它的值 if(arr[0]=="username") return arr[1]; } return "";}
(2) Page2.html HTML 代码部分：
// Page2.html 页面初始加载执行的Js代码: function init() { // 从Cookie中读取用户名信息 var username = GetCookie("username"); // 如果用户已经登录过 if(username && username.length >0) { // 显示欢迎信息 $("msg").innerHTML = "<h2>欢迎光临："+ username + "!</h2>"; } else { $("msg").innerHTML = "<a href='Page1.html'>请返回，登录！</a>"; } } function $(id) { return document.getElementById(id); } // HTML body部分 <body onload="init()"> <div id="msg"></div> </body>
另外，关于删除Cookie,可以使用以下方法：
该函数可以删除指定名称的cookie：
<script language="JavaScript" type="text/javascript"> function deleteCookie(username){ var date=new Date(); // // 删除一个cookie，就是将其过期时间设定为一个过去的时间 date.setTime(date.getTime()-10000); document.cookie=name+"=v; expire=" + date.toGMTString();}</script>
