JavaScript 创建与存储 Cookie 完整示例

JavaScript 创建与存储 Cookie 完整示例

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

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

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

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

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

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

创建 Cookie 其实也就是在拼一句 String：

"username=amosli;expires=Mon, 16 Dec 2013 16:20:04 GMT" 然后 document.cookie=上面的 String 即可.

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 的名称、值以及过期天数。

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

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

getCookie() 的核心就一句话 document.cookie,剩余部分就是对字符串的处理上了.

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
c_start=document.cookie.indexOf(c_name + "=")
/* 
Cookie 是一组字符串:"username=amosli; ASPSESSIONIDQAAADBDD=GGIJNHCDKGNFEGJIIFDNNION; __utma=119627022.986713705.1387205055.1387205055.1387208465.2; __utmb=119627022.3.10.1387208465; __utmc=119627022; __utmz=119627022.1387208465.2.2.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)"
*/
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。假如 document.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>