cookie 详解

cookie概览

cookie是Web浏览器存储的少量命名数据,它与某个特定的网页或网站关联在一起。cookie是用来给Web浏览器提供内存,以便脚本和服务端程序可以在一个页面使用另一个页面的输入数据,或者在用户离开页面并返回时恢复用户的优先级及其他变量。

cookie操作及属性

Document对象含有一个cookie属性,通过javascript可以对cookie进行操作。

cookie是一个字符串属性,可以用它对当期网页的cookie进行读操作、创建操作、修改操作和删除操作。

除了名字和值外,每个cookie都有四个可选的属性,分别是:

expires、path、domain、secure

 

expires:

       指定了cookie的生存期。默认情况下,cookie是暂时存在的,它们存储的值只在浏览器会话期间存在。当用户退出浏览器后,这些值也就丢失了。如果想让一个cookie存在的事件超过一个浏览器会话期,必须告诉浏览器希望它保存cookie多长时间。做到这一点就是把expires属性设置为未来的一个过期日期。尽管expires属性仍然有效,但是它已经被max-age属性所取代,后者用秒来设置cookie的生命期。设置这两个属性的任何一个,都会使浏览器把cookie保存到一个本地文件中,以便用户下次访问这个网页时能够再将它读取出来。一旦超过了终止日期,那个cookie就会被浏览器自动从cookie文件中删掉。

 

path:

      它指定了与cookie关联在一起的网页。默认情况下,cookie会和它创建的网页以及与这个网页处于同一个目录下的网页和处于该目录下的子目录的网页关联,也就是说cookie只能在同一个目录下的网页共享。但是,有时候在不同的目录下使用到这个cookie的值,这个时候就要指定cookie的path属性了。例如:

在www.example.com/catalog/widgets/index.html 页面下设置的cookie将path属性设置为path="/catalog"

那么在www.example.com/catalog/other.html 的页面下也可以访问这个cookie的。

如果将path设置为path="/" ,那么这个cookie在www.example.com服务器上的所有网页都是可见的。

domain:

      但是,在一些大的网站可能需要多个Web服务器共享cookie。例如

order.example.com 的服务器要读取位于catalog.example.com的页面创建的cookie。这就要用到cookie的domain属性了。将domain属性设置成domain=".example.com",那么位置example.com域的其它服务器上的网页都可以访问这个cookie。如果没有设置domain属性,默认值就是创建cookie的网页所在服务器主机名。

secure:

      它指定了网络上如恶化传输cookie值。默认情况下cookie是不安全的,也就是说,他们是同个一个普通的、不安全的HTTP链接传输的。但是如果将cookie标记为安全,那么它将在浏览器和服务器通过HTTPS或其他安全协议连接时才被传输。

 

cookie操作DEMO:

创建一个缓存一年的cookie:

document.cookie = "user = value;max-age="+(60*60*24*356);

 

设置对应的属性:

document.cookie = "user = value;max-age="+(60*60*24*356)+";path="+path+";domain="+domain+";secure";

 

 

cookie工具类

 1 var cookies = {  
 2         //读取cookie:字符串截取方法  
 3         getCookieByStr:function (c_name){  
 4             if (document.cookie.length>0){  
 5                 c_start=document.cookie.indexOf(c_name + "=");//检测是否存在对于的键值  
 6                 if(c_start!=-1){   
 7                     c_start=c_start + c_name.length+1; //返回等号后面一个字符索引,及对应字符开始位置  
 8                     c_end=document.cookie.indexOf(";",c_start);//从c_start位置开始搜索字符";",返回字符的位置索引  
 9                     if (c_end==-1) {c_end=document.cookie.length;}//如果找不到字符";",即只有一个cookie值  
10                     return unescape(document.cookie.substring(c_start,c_end)); //通过前后位置截取对于的cookie值,并解码  
11                 }   
12             }  
13             return ""; //不存在则返回空  
14         },  
15         //设置cookie--名称/值/过期天数  
16         setCookie:function(c_name,value,expiredays){  
17             var exdate=new Date();  
18             exdate.setDate(exdate.getDate()+expiredays);//设置日期  
19             document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
20         },  
21         //删除cookie  
22         delCookie:function(c_name){  
23             var exdate = new Date();  
24             exdate.setDate(exdate.getDate()-1);//昨天日期  
25             document.cookie = c_name+"=;expires="+exdate.toGMTString();  
26         }  
27     };  

 

 

完整demo下载:

【JavaScript】cookies详解.zip

 

posted @ 2014-10-29 18:05 Real_Aaron 阅读(...) 评论(...) 编辑 收藏