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处理函数：

/***
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

/* Cookie 过期时间 */
14

var expire = new Date();
15

/* 如果未设置nDays参数或者nDays为0，取默认值 1 */
17

if(nDays == null || nDays == 0)
18

nDays = 1;
19

/* 计算Cookie过期时间 */
21

expire.setTime(today.getTime() + nDays * 24 * 60 * 60 * 1000); //获取毫秒数
22

/* 设置Cookie值 */
24

document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString();
25

}
26

下面我来编写一个登录函数，加强理解和应用

// 登录函数
2

function login()
3

{
4

// 用户名
5

var username = $("user").value;
6

// 用户密码
8

var password = $("pass").value;
9

// 我们这里设置一额外条件，交友登录用户选择
11

// 是否7天内无需再登录，即可访问
12

var save = $("save").checked;
13

// 这里，假设一合法的用户名/密码是 admin/admin
15

if(username == "admin" && password == "admin")
16

{
17

// 在Cookie中保存用户名
18

if(save)
19

SetCookie("username",username,7);
20

else
21

SetCookie("username",username,1);
22

// 通过验证，跳转到下一页面
24

document.location = "page2.html";
25

}
26

else
27

{
28

alert("用户名或密码错误！");
29

}
30

}
31

function $(id)
33

{
34

return document.getElementById(id);
35

}
36

</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方法）：

/***

* 读取指定的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>

另外，关于删除Cookie,可以使用以下方法：
该函数可以删除指定名称的cookie：

function deleteCookie(username){

var date=new Date();

// // 删除一个cookie，就是将其过期时间设定为一个过去的时间

date.setTime(date.getTime()-10000);

document.cookie=name+"=v; expire=" + date.toGMTString();

}

</script>