Crazy knowledge base

javascript Cookies

简介

Cookies
在这里我给出三个用于存储、读取和清除cookies的函数。您可以使用这些函数管理您站点的cookies。
首先是对cookies的介绍和对document.cookie的简要说明,接下来举一个例子。然后是那三个函数和他们的解释。

 

Cookies

 

Cookies最初被Netscape发明出来用于使web服务器和浏览器拥有“记忆”的能力。HTTP协议,用于发送网页内容到浏览器端并把浏览器中的页面请求转发回服务器,它是无状态的,也就是说当服务器发送完浏览器请求的网页内容后,它不会记得任何关于此次动作的信息。所以即使你访问同一个网页两次、三次、一百次甚至一百万次,服务器都认为和您第一次访问是一样的!

很多时候这非常恼人。服务器记不住您为访问保护页面所做的身份验证,也不记得您的使用偏好,它完全失忆了!当个性化被提倡时,这变成了一个大问题。

Cookies就是被发明出来解决这个问题的。当然也有其他方法来解决它,但是cookies更易于维护也相当灵活。

 

Cookies如何工作

 

一个cookie就是存储在浏览器中的一个文本文件.(?)它包含了一些数据:

1.       一个键值对(name-value pair)包含实际数据

2.       一个过期时间,过期后此cookie无效

3.       服务器域和路径(注:cookie在此域和路径下有效)

 

当从服务器请求一个页面的同时cookie也会被送出,这个cookie被附加到HTTP头里。服务器端程序就能读出这些信息并决定您是否有权查看该页面或者是做出一些个性化的设置(比如您想背景变绿色或者连接变成黄色)。

 

所以每次当您访问这个站点,cookie也随之而来,关于您的信息也就被记录下来了。有时这很棒,但有时也会威胁到您的隐私。幸运的是越来越多的浏览器给你管理cookie的机会。

 

Cookies也能被Javascript读取。他们通常用来存储用户使用偏好。

 

键值对(name-value)

 

每个cookie都有一个包含实际信息的键值对。Cookie有了名字后就便于使用了,当需要读取cookie的信息时可以搜索这个名字。

如果想读取cookie,就搜索那个名字然后看看到底什么值跟它绑定在一起。当然你必须自己决定cookie能具有那些值,也要自己写脚本处理这些值。

 

过期时间(Expiry date)

每个cookie都有一个过期时间,过了这个时间它就会被回收。如果没有设定这个时间的话,当浏览器被关掉后即过期。过期时间应该是UTC(格林威治)时间格式,可用Date.toGMTString()方法来创建此格式的时间。

 

域和路径(Domain and path)

(注:此处假定我们访问的是www.quirksmode.org

每个cookie也有域(此处可以解释为域名)和路径。域负责告诉浏览器哪个域的cookie应被送交。如果不指定它,它就是设定此cookie的页面的域。(现在它是www.quirksmode.org).请注意,这样做的目的就是域是允许Cookies跨子域的。我的cookie不能被search.quirksmode.org读取,因为它的域是www.quirksmode.org。(注:www和search均为子域)当设置它的域到quirksmode.org时,search子域才能读取到。这种情况下,不能设置域到一个我不在的域中,例如我不能把域设置为www.microsoft.com

只允许为quirksmode.org。

 

路径让我们标识cookie可活动的目录。所以如果我们想要cookie只在cgi-bin目录下的页面有效,就把路径设置为/cgi-bin。通常路径被设置为/,也就是整个域下都有效。

 

document.cookie

 

Cookies 可以被Javascript创建,读取和清除。他们可以通过document.cookie属性进行操作。即使你可以把document.cookie当作字符串一样来对待,但这只是假象,您只能操作cookie的键值对。

 

当我想设置一个此域的cookie,它有一个’ppkcookie1=testcookie’的键值对,过期时间为七天,这样写:

 ‘ppkcookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/’

 

1.       首先是键值对(’ppcookie1=testcookie’)

2.    然后一个分号一个空格

3.    接着是正确格式过期时间(‘empires=Thu, 2 Aug 2001 20:47:11 UTC’)

4.    再来一个分号一个空格

5.    最后是路径(path=/)

这是非常严格的语法,不要改动它!

 

即使这看起来像是把整个字符串都写到了document.cookie中,但当我再读出它的时候我只看见了键值对:

Ppkcookie1=testcookie

若想设置另一个cookie,再一次:

document.cookie=’ppkcookie2=another test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/’

 

第一个cookie并没有被覆盖,所以它不是一个字符串。第二个cookie是被附加到document.cookie中的,所以当我们读出它时得到:

Ppkcookie1=testcookie; ppkcookie2=another test

若想重置一个cookie,写如下语句:

Document.cookie=’ppkcookie2=yet another test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/’

原来的cookie就会被覆盖然后document.cookie就会是:

Ppklcookie1=tesetcookie; ppkcookie2=yet another test

想读取cookie的话就必须把document.cookie当作字符串来对待,然后搜索特定的字符(比如分号)和cookie的名字(name)。在下面会解释具体操作。

 

最后是清除cookie,只要把它的过期时间设定为今天以前的一个日期,浏览器就会认为cookie已过期并把它清理掉。

 

Document.cookie=’ppkcookie2=yet another test; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/’

 

例子:

此例子包含互动操作请参看http://www.quirksmode.org/js/ Examplecookies.html小节

 

脚本

 

这里有你需要的三个脚本

 

function createCookie(name,value,days) {

       if (days) {

              var date = new Date();

              date.setTime(date.getTime()+(days*24*60*60*1000));

              var expires = “$$ expires=”+date.toGMTString();

       }

       else var expires = “”$$

       document.cookie = name+”=”+value+expires+”$$ path=/”$$

}

 

function readCookie(name) {

       var nameEQ = name + “=”$$

       var ca = document.cookie.split(‘;’);

       for(var i=0;i < ca.length;i++) {

              var c = ca[i];

              while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);

              if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

       }

       return null;

}

 

function eraseCookie(name) {

       createCookie(name,””,-1);

}

解释:

这个函数并不特别复杂,最难的部分就是为设定cookie建立正确的语法。

 

createCookie

当调用createCookie()时需要给出三个信息片段(参数):cookie的名字,值和保留cookie的天数,下面的情况是键值对变为 ppkcookie=testcookie 并保留cookie7天。

createCookie(‘ppkcookie’,’testcookie’,7)

 

如果将天数设为0,在关闭浏览器时cookie也就会被清除了,若将天数设为负数,cookie将即刻被清除。

 

这个函数接受参数并开始做事:

Function createCookie(name,value,days){

首先查看是否有days值,如果没有我们就不必进行时间计算:

If(days){

如果有days值,新建一个包含现在日期Date对象:

var date =new Date();

接下来得到当前时间(毫秒)并加上取得的天数(转换为毫秒)。然后赋值给date变量,现在我们就有了cookie过期需要的时间的毫秒值。

Date.setTime(date.getTime()+(days*24*60*60*1000));

把date的UTC/GMT格式赋给cookie需要的变量expires

var expires =”; expires=”+date.toGMTString();

}

如果传递给函数的days为0,expires就设为空,这样的话当关闭浏览器时cookie就过期了

Else var expires =””;

最后把新的cookie按照正确的语法写入document.cookie中:

Document.cookie=name+”=”+value+expires+”; path=/”;

 

到此cookie建立成功。

 

readCookie

 

要读取cookie,调用这个函数并传递cookie的name。把name放入一个变量。首先检查是否这个变量已被赋值(如果cookie不存在,这个变量变为null,这可能会打乱函数的执行),然后做任何想做的事:

Var x =readCookie(‘ppkcookie1’)

If(x){

       [do something with x]

}

函数接收参数并开始执行:

Function readCookie(name){

然后准备搜索名为name的cookie,把=附加到name后,并把它赋给新的字符串变量nameEQ:

Var nameEQ=name+”=”;

然后用分号(;)把document.cookie分割,把分割后的数组赋给变量ca,其中包含此域和路径的所有cookies:

Var ca = document.cookie.split(‘;’);

遍历数组(即cookies):

For(var i=0;i<ca.length;i++){

把要被检查的cookie赋给变量c

Var c=ca[i];

如果第一个字符为空格,用substring()方法去掉,循环此步骤直到第一个字符不是空格为止:

While(c.charAt(0)==’ ‘) c=c.substring(1,c.length);

现在字符串c的值开始于当前cookie的name,检查是否这个name是我们需要的cookie的:

If(c.indexOf(nameEQ)==0)

我们已经找到我们要找的cookie。现在只需要返回cookie的值,这个值就是c中nameEQ后面的部分。返回值后函数也结束:任务完成!

If(c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);

}

如果遍历所有cookies后没有发现要找的name,那么cookie就不是当前的,返回null

Return null

}

Cookie读取完成

 

EraseCookie

清除cookie是非常简单的。

eraseCookie(’ppkcookie’)

把要清除的cookie的name传递过去

Function eraseCookie(name){

调用createCookie()将cookie的过期日期设置为以前的某个时间

createCookie(name,””,-1);

浏览器发现expiry时间已过,立即删除cookie。

javascript Cookies
滚动到顶部