JavaScript 手动创建、读取与存储 Cookie 详解

Cookie 基本概念与常见应用

Cookie 是存储在访问者计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 Cookie。你可以使用 JavaScript 来创建和取回 Cookie 的值。

有关 Cookie 的例子：

名字 Cookie

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 Cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 Cookie 中取回的。

密码 Cookie

当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 Cookie 中。当他们再次访问网站时，密码就会从 Cookie 中取回。

日期 Cookie

当访问者首次访问你的网站时，当前的日期可存储于 Cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 Cookie 中取回的。

JavaScript 手动创建与存储 Cookie 实现

在这个例子中我们要创建一个存储访问者名字的 Cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 Cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。

首先，我们会创建一个可在 Cookie 变量中存储访问者姓名的函数：

 
<span style="font-size:14px;">function setCookie(c_name,value,expiredays)
{ 
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}</span>

上面这个函数中的参数存有 Cookie 的名称、值以及过期天数。

在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 Cookie 名称、值及其过期日期存入 document.cookie 对象。

之后，我们要创建另一个函数来检查是否已设置 Cookie：

 
<span style="font-size:14px;">function getCookie(c_name)
{ 
if (document.cookie.length>0)
{ 
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{ 
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
} 
} 
return ""
}</span>

上面的函数首先会检查 document.cookie 对象中是否存有 Cookie。假如 document.cookie 对象存有某些 Cookie，那么会继续检查我们指定的 Cookie 是否已储存。如果找到了我们要的 Cookie，就返回值，否则返回空字符串。

最后，我们要创建一个函数，这个函数的作用是：如果 Cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。

 
<span style="font-size:14px;">function checkCookie()
{ 
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{ 
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{ 
setCookie('username',username,365)
} 
} 
}</span>

这是所有的代码：

 
<span style="font-size:14px;"><html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{ 
if (document.cookie.length>0)
{ 
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{ 
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
} 
} 
return ""
} 
function setCookie(c_name,value,expiredays)
{ 
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
} 
function checkCookie()
{ 
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{ 
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{ 
setCookie('username',username,365)
} 
} 
} 
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html></span>