JavaScript Cookies

最新推荐文章于 2024-10-05 07:56:51 发布

GXing007

最新推荐文章于 2024-10-05 07:56:51 发布

阅读量237

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/GXing007/article/details/79420940

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建和管理Cookie来存储用户信息，如用户名、密码和日期等，并提供了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 中取回的。

创建和存储 cookie

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

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

function setcookie(c_name,value,expiredays){

var exdate=new Date()

exdate.setDate( exdate.getDate()+expiredays)

//setDate()方法用于设置一个月的某一天,getDate方法返回月份的某一天

document.cookie=c_name+"="+escape(value)+

//cookie值得要求是只能用在URL编码中的字符 escape方法是把字符串按照URL编码方式来编码的，需要用excape()方法来处理输出到cookie的值，用unexcape()来处理从cookie接收过来的值

((expiredays==null)?"":";expires="exdate.toGMTString（））

//cookie的时效日期都是GMT格式的，其他格式的时间是没有用的

}

上面这个函数中的参数存有 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=documnet.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)
    }
  }
}

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>