当前位置: 首页 > 网络学院 > 客户端脚本教程 > JavaScript > JS Cookies
A cookie is often used to identify a user.
cookie经常用做辨别用户(身份)
Create a welcome cookie
建立一个欢迎cookie(先输入你的名字,再刷新下就能看到效果了)
A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.
cookie是保存在用户计算机上的变量。每次相同的计算机请求该页时,它(计算机)就会发送cookie。通过JS你可以建立和检索cookie的值
Examples of cookies:
cookies的实例:
In this example we will create a cookie that stores the name of a visitor. The first time a visitor arrives to the web page, he or she will be asked to fill in her/his name. The name is then stored in a cookie. The next time the visitor arrives at the same page, he or she will get welcome message.
在这个例子中我们将建立一个cookie并让它保存一位访问者的名字。当访问者第一次来到这个页面的时候就要求必须添写名字。这个名字就会保存在一个cookie中。下次他/她再来的时候就会得到一个欢迎信息。
First, we create a function that stores the name of the visitor in a cookie variable:
首先,我们建立一个能保存访问者名字的函数:
function setCookie(c_name,value,expiredays) { |
The parameters of the function above hold the name of the cookie, the value of the cookie, and the number of days until the cookie expires.
上面的这个保存名字的cookie函数中的参数有:value,这个是cookie的值;c_name是被保存的名字;expiredays是cookie的到期时间(多少天过期)
In the function above we first convert the number of days to a valid date, then we add the number of days until the cookie should expire. After that we store the cookie name, cookie value and the expiration date in the document.cookie object.
在上面的函数中我们首先将天数变为有效的日期,然后我们添加cookie的过期天数。之后我们将cookie的名字,它的值以及过期日期保存在document.cookie对象中。
Then, we create another function that checks if the cookie has been set:
然后,我们建立另外一个函数来检查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 null } |
The function above first checks if a cookie is stored at all in the document.cookie object. If the document.cookie object holds some cookies, then check to see if our specific cookie is stored. If our cookie is found, then return the value, if not - return null.
上面的函数首先检查了document.cookie对象中是否包含cookie。如果有的话就检查具体的cookie是否存在。如果我们的cookie找到的话就返回其值,不然就返回一个null
Last, we create the function that displays a welcome message if the cookie is set, and if the cookie is not set it will display a prompt box, asking for the name of the user:
最后我们建立一个如果cookie存在就显示欢迎信息的函数,如果没有设置cookie的话就要求写如名字:
function checkCookie() { username=getCookie('username') if (username!=null) {alert('Welcome again '+username+'!')} else { username=prompt('Please enter your name:',"") if (username!=null && username!="") { setCookie('username',username,365) } } } |
All together now:
现在合起来:
<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 null } function setCookie(c_name,value,expiredays) { function checkCookie() { username=getCookie('username') if (username!=null) {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> |
The example above runs the checkCookie() function when the page loads.
上面的例子在页面加载的时候运行了checkCookie() 函数