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