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> 