JavaScript Cookies

cookie通常用来识别一个用户。

—————————————————————————

什么是 Cookie?

cookie是一个存储在访客电脑上的变量。每次当同一台电脑发出请求要访问一个网页,它也会同时送出这个cookie。使用JavaScript你既可以生成一个cookie,也可以读取这个cookie。

cookie的例子:

  • 用户名cookie – 如果你要求用户在第一次访问你的网页时填写一个名称,比如”小李”,那么这个名称可以存储在cookie里。下一次当同一个用户访问你的网页时,你就可以从他的cookie中读取这个名称,显示一条针对他的欢迎信息,比如:“小李你好”。
  • 密码 cookie – 同样当用户第一次访问你的网站时要求他输入一个密码,下一次他再访问你的网站的时候,可以从他的cookie里面读取这个密码,而不需要用户再输入一次。
  • 日期 cookie – 当用户第一次访问你的网站时,当前日期被存储在一个cookie里。下一次用户再访问时,就可以显示类似“你上次于2005年8月10日访问本站”的信息,这个日期信息就是从cookie里读取的。

Cookie的生成和存储

下面这个例子里,我们生成一个cookie来存储访客的姓名。第一次用户来访时,会被提示填写姓名信息。输入的姓名被存储在cookie里。下次访客访问同一页面时,他就会接收到一个欢迎信息。

首先,我们写一个函数来将访客的姓名存储在一个cookie变量里:

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())
}

上面函数的参数分别为cookie的名称(c_name),cookie值(value),和cookie的有效天数(expiredays)。

在上面的函数里,我们首先取当前日期,然后加上有效天数,这样就将cookie的有效天数转换为了一个cookie的失效日期。然后我们将 cookie的名称,值,和失效日期存储在document.cookie这个对象里。

下面,我们再写一个函数来检查cookie是否已被设置了:

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 “”
}

上面这个函数首先检查document.cookie里面有没有cookie。如果有cookie,则检查是否存在我们的cookie。如果找到我们的cookie,则返回它的值。如果没有,返回一个空字符串。

最后,我们写下面这个函数,如果cookie已经设置了,则显示欢迎信息,如果没有cookie,则显示一个提示对话框,询问用户的姓名:

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)
}
}
}

把上面的函数都串起来,我们有下面的完整代码:

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

上面这个例子在页面加载时会运行函数 checkCookie() 。


Leave a comment

Current ye@r *