JavaScript Cookies

36  

Contents

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

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

什么是 Cookie?

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

cookie的例子:

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

Your email address will not be published.