JavaScript中的document.cookie的使用

最新推荐文章于 2024-04-08 17:00:22 发布

书法教育1

最新推荐文章于 2024-04-08 17:00:22 发布

阅读量443

点赞数

分类专栏： java-web 文章标签： javascript cookie 对象

java-web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

我们已经知道，在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么？“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息，这些文件就称为 Cookie。”—— MSIE 帮助。一般来说，Cookies 是 CGI 或类似，比 HTML 高级的文件、程序等创建的，但是 JavaScript 也提供了对 Cookies 的很全面的访问权利。
　我们先要学一学 Cookie 的基本知识。

　　每个 Cookie 都是这样的：

///设置cookie 
function setCookie(NameOfCookie, value, expiredays) 
{ 
//@参数:三个变量用来设置新的cookie: 
//cookie的名称,存储的Cookie值, 
// 以及Cookie过期的时间. 
// 这几行是把天数转换为合法的日期 

var ExpireDate = new Date (); 
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); 

// 下面这行是用来存储cookie的,只需简单的为"document.cookie"赋值即可. 
// 注意日期通过toGMTstring()函数被转换成了GMT时间。 

document.cookie = NameOfCookie + "=" + escape(value) + 
  ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); 
} 

///获取cookie值 
function getCookie(NameOfCookie) 
{ 

// 首先我们检查下cookie是否存在. 
// 如果不存在则document.cookie的长度为0 

if (document.cookie.length > 0) 
{ 

// 接着我们检查下cookie的名字是否存在于document.cookie 

// 因为不止一个cookie值存储,所以即使document.cookie的长度不为0也不能保证我们想要的名字的cookie存在 
//所以我们需要这一步看看是否有我们想要的cookie 
//如果begin的变量值得到的是-1那么说明不存在 

begin = document.cookie.indexOf(NameOfCookie+"="); 
if (begin != -1)    
{ 

// 说明存在我们的cookie. 

begin += NameOfCookie.length+1;//cookie值的初始位置 
end = document.cookie.indexOf(";", begin);//结束位置 
if (end == -1) end = document.cookie.length;//没有;则end为字符串结束位置 
return unescape(document.cookie.substring(begin, end)); } 
} 

return null; 

// cookie不存在返回null 
} 

///删除cookie 
function delCookie (NameOfCookie) 
{ 
// 该函数检查下cookie是否设置，如果设置了则将过期时间调到过去的时间; 
//剩下就交给操作系统适当时间清理cookie啦 

if (getCookie(NameOfCookie)) { 
document.cookie = NameOfCookie + "=" + 
"; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
} 
}

演示文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Cookie</title> 
<mce:style type="text/css"><!--

#welcome h3 
{ 
font-weight:normal; 
color:#800; 
} 
--></mce:style><style type="text/css" mce_bogus="1"> 
#welcome h3 
{ 
font-weight:normal; 
color:#800; 
} </style> 
<mce:script type="text/javascript" src="cookie.js" mce_src="cookie.js"></mce:script> 
<mce:script type="text/javascript"><!--


//---------------使用cookie---------------------- 
function useCookie() 
{ 
var username=getCookie("username"); 
if(username!=null){ 
document.getElementById('welcome').innerHTML="<h3>欢迎您,"+username+"</h3>"+"<button onclick='delusr();'>删除用户名</button>"; 
}else{ 
var str="<h3>欢迎您,游客!</h3>"+ 
  "<input id='usrname' type='text' />"+ 
  "<button id='saveusr' onclick='checksave();'>保存用户名</button>"; 
document.getElementById('welcome').innerHTML=str; 
} 
} 

function checksave() 
{ 
var el=document.getElementById('usrname'); 
if(el.value){ 
setCookie("username",el.value); 
location.reload();//刷新页面 
} 
else 
alert("输入框不能为空"); 
} 

function delusr() 
{ 
delCookie("username"); 
location.reload(); 
} 
// --></mce:script> 
</head> 
<body onload="useCookie();"> 
<div id="welcome"> 
</div> 
</body> 
</html>