夏日博客

A-A+

js cookie使用详细介绍

2016年01月21日 前端设计 暂无评论 阅读 7 views 次

本文章详细的介绍cookie的用法详细有需要的朋友可参考一下。

cookie是基于http协议，cookie就是限制性的存储字符串的，我们可以通过document.cookie来存储字符串,而最近手头上有个项目上涉及到有关于cookie的操作，即登录与退出，对于这个需求，逻辑很简单.

1.登录前的cookie检查

2.登录取的后端数据，再存到cookie

3.退出登录，清楚cookie.

这里面除了逻辑之外，涉及到了cookie取值和设值的问题,这里我用到了jquery的第三方插件$.cookie来取值和设置,根据之上的逻辑与$.cookie来取值和设值，这个任务很快就完成了，在本地apache测试没有问题,接着就提交测试了，想不到问题马上出现了，目前的网站是a.xxx.com;而我们的另一个二级域名的网站b.xxx.com也有登录，即两个网站是可以设置document.domain="xxx.com".

在网站b.xxx.com登录成功后，已经写了个$.cookie("userid"), 在控制台打document.cookie="userid=112343",第一次进a.xxx.com貌似是对的，因为$.cookie("userid")有值，所以也会进入已经登录状态，但点退出登录后，再进b.xxx.com后还是登录状态。难道是cookie没有共享, 看下document.cookie="userid=112343;userid=0";

在这里很奇怪，在a.xxx.com退出登录时，已经设置了$.cookie("userid",0)，但并没有覆盖之前的userid,而是追加了一个新的userid=0,之前的userid还存在,看来清除cookie不是重新设置值这么简单,在网上查了下资料，即清除cookie还需要增加个过期时间，即小过现在的时间就可以了，代码就修改成:

$.cookie("userid", 0 , {expirs:new Date() -1000});

但还是没达到效果。

在这里也科普了下cookie的组成,cookie其实是由name,value,expires,path,domain等属性组成的，如果写cookie的时候设置了path与domain, 则清除cookie时也需要设置相同的path,domain, 如果没有设置domain, 即取当前的location.host,所以原因找到了。

当b.xxx.com写cookie时设置了domain:xxx.com,和path:''/", 而我在a.xxx.com清cookie时只是设置了value和过期时间，并没有写domain和path, 所以并没有清除原来的userid ,而是生成了新的userid,这个userid默认的domain为a.xxx.com，只是因为有过期时间，马上就消除了。但并没有清除之前的userid.所以改代码为:

$.cookie("userid",0,{expires:new Date()-1000, domain:"7k7k.com", path:"/"}

即清除了之前的userid.

二.cookie的读取操作

要精确的对 cookie 进行读取其实很简单，就是对字符串进行操作。从w3school上copy这段代码来做分析：

  1. function getCookie(c_name){  
  2. 　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""  
  3. 　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　  
  4. 　　　　　　if (c_start!=-1){   
  5. 　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置  
  6. 　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断  
  7. 　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　  
  8. 　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节  
  9. 　　　　　　}   
  10. 　　　　}  
  11. 　　　　return ""  
  12. 　　}　  

　

当然想实现读取cookie的方法还有不少，比如数组，正则等，这里就不往细说了。

三.设置cookie的有效期

文章中常常出现的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在时间。在默认的情况下，cookie 会在浏览器关闭的时候自动清除，但是我们可以通过expires来设置 cookie 的有效期。语法如下：

document.cookie = "name=value;expires=date"

上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

  1. var _date = new Date();  
  2. _date.setDate(_date.getDate()+30);  
  3. _date.toGMTString();  

上面三行代码分解为几步来看：

通过new生成一个Date的实例，得到当前的时间；

getDate()方法得到当前本地月份中的某一天，接着加上30就是我希望这个cookie能过在本地保存30天；

接着通过setDate()方法来设置时间,最后 用toGMTString()方法把Date对象转换为字符串,并返回结果.

通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 - 从w3school复制下来的,创建一个在 cookie 中存储信息的函数.

  1. function setCookie(c_name, value, expiredays){  
  2. 　　var exdate=new Date();  
  3. 　　exdate.setDate(exdate.getDate() + expiredays);  
  4. 　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
  5. }  

使用方法:setCookie('username','Darren',30)

现在我们这个函数是按照天数来设置cookie的有效时间，如果想以其他单位（如:小时）来设置，那么改变第三行代码即可：

exdate.setHours(exdate.getHours() + expiredays);

这样设置以后的cookie有效期就是按照小时为单位的。

常见问题中有提到清除 cookie 的两种方法，现在要说的是使 cookie 失效，通过把有效期的时间设置为一个已过期的时间。既然已经有了设置有效期的方法，那么设置失效期的方法就请感兴趣的朋友自己动手了^_^。下面继续比较深的cookie话题。

Cookie 高级篇

一.cookie 路径概念

在基础知识中有提到 cookie 有域和路径的概念，现在来介绍路径在 cookie 中的作用。

cookie 一般都是由于用户访问页面而被创建的，可是并不是只有在创建 cookie 的页面才可以访问这个 cookie。

默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问，这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 cookie。举个例子：

那么如何让这个 cookie 能被其他目录或者父级的目录访问类，通过设置 cookie 的路径就可以实现。例子如下：

document.cookie = "name=value;path=path" document.cookie = "name=value;expires=date;path=path" 红色字体path就是 cookie 的路径,最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie,所有的页面都可以访问到了,代码如下:

document.cookie = "name=Darren;path=/"　　

二.cookie 域概念

路径能解决在同一个域下访问 cookie 的问题，咱们接着说 cookie 实现同域之间访问的问题。语法如下：
　　
document.cookie = "name=value;path=path;domain=domain"　

红色的domain就是设置的 cookie 域的值。

例如 "www.qq.com" 与 "sports.qq.com" 公用一个关联的域名"qq.com"，我们如果想让 "sports.qq.com" 下的cookie被 "www.qq.com" 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 "/"。例：

document.cookie = "username=Darren;path=/;domain=qq.com"

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"　　把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

注:就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了，??..

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识，因为如果对这个不了解的话编码问题确实是一个坑，所以还是详细说说。

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来,如设置cookie时,代码如下:

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

再看看基础用法时提到过的getCookie()内的一句,代码如下:

return unescape(document.cookie.substring(c_start,c_end))　

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

实例代码如下:

  1. <script>  
  2. //写cookies函数 作者：翟振凯  
  3. function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值  
  4. {  
  5.     var Days = 30; //此 cookie 将被保存 30 天  
  6.     var exp  = new Date();    //new Date("December 31, 9998");  
  7.     exp.setTime(exp.getTime() + Days*24*60*60*1000);  
  8.     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();  
  9. }  
  10. function getCookie(name)//取cookies函数          
  11. {  
  12.     var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));  
  13.      if(arr != null) return unescape(arr[2]); return null;  
  14. }  
  15. function delCookie(name)//删除cookie  
  16. {  
  17.     var exp = new Date();  
  18.     exp.setTime(exp.getTime() - 1);  
  19.     var cval=getCookie(name);  
  20.     if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();  
  21. }  
  22.    
  23. SetCookie ("xiaoqi", "3")  
  24. alert(getCookie('xiaoqi'));  
  25. </script>  

一个非常实用的javascript读写Cookie函数,代码如下:

  1. function  GetCookieVal(offset)  
  2. //获得Cookie解码后的值  
  3. {  
  4. var  endstr  =  documents.cookie.indexOf  (";",  offset);  
  5. if  (endstr  ==  -1)  
  6. endstr  =  documents.cookie.length;  
  7. return  unescape(documents.cookie.substring(offset,  endstr));  
  8. }  
  9. function  SetCookie(name,  value)  
  10. //设定Cookie值  
  11. {  
  12. var  expdate  =  new  Date();  
  13. var  argv  =  SetCookie.arguments;  
  14. var  argc  =  SetCookie.arguments.length;  
  15. var  expires  =  (argc  >  2)  ?  argv[2]  :  null;  
  16. var  path  =  (argc  >  3)  ?  argv[3]  :  null;  
  17. var  domain  =  (argc  >  4)  ?  argv[4]  :  null;  
  18. var  secure  =  (argc  >  5)  ?  argv[5]  :  false;  
  19. if(expires!=null)  expdate.setTime(expdate.getTime()  +  (  expires  *  1000  ));  
  20. documents.cookie  =  name  +  "="  +  escape  (value)  +((expires  ==  null)  ?  ""  :  (";  expires="+  expdate.toGMTString()))  
  21. +((path  ==  null)  ?  ""  :  (";  path="  +  path))  +((domain  ==  null)  ?  ""  :  (";  domain="  +  domain))  
  22. +((secure  ==  true)  ?  ";  secure"  :  "");  
  23. }  
  24. function  DelCookie(name)  
  25. //删除Cookie  
  26. {  
  27. var  exp  =  new  Date();  
  28. exp.setTime  (exp.getTime()  -  1);  
  29. var  cval  =  GetCookie  (name);  
  30. documents.cookie  =  name  +  "="  +  cval  +  ";  expires="+  exp.toGMTString();  
  31. }  
  32. function  GetCookie(name)  
  33. //获得Cookie的原始值  
  34. {  
  35. var  arg  =  name  +  "=";  
  36. var  alen  =  arg.length;  
  37. var  clen  =  documents.cookie.length;  
  38. var  i  =  0;  
  39. while  (i  <  clen)  
  40. {  
  41. var  j  =  i  +  alen;  
  42. if  (documents.cookie.substring(i,  j)  ==  arg)  
  43. return  GetCookieVal  (j);  
  44. i  =  documents.cookie.indexOf("  ",  i)  +  1;  
  45. if  (i  ==  0)  break;  
  46. }  
  47. return  null;  
  48. }  
  49.    
  50. <SCRIPT  language="javascript">  
  51. <!--  
  52. function  openpopup(){  
  53. url="popup.htm"  
  54. window.open("gonggao.htm","gonggao","width=260,height=212,left=200,top=0")  
  55. }  
  56. function  get_cookie(Name)  {  
  57. var  search  =  Name  +  "="  
  58. var  returnvalue  =  "";  
  59. if  (documents.cookie.length  >  0)  {  
  60. offset  =  documents.cookie.indexOf(search)  
  61. if  (offset  !=  -1)  {  
  62. offset  +=  search.length  
  63. end  =  documents.cookie.indexOf(";",  offset);  
  64. if  (end  ==  -1)  
  65. end  =  documents.cookie.length;  
  66. returnvalue=unescape(documents.cookie.substring(offset,  end))  
  67. }  
  68. }  
  69. return  returnvalue;  
  70. }  
  71. function  helpor_net(){  
  72. if  (get_cookie('popped')==''){  
  73. openpopup()  
  74. documents.cookie="popped=yes"  
  75. }  
  76. }  
  77. helpor_net()  
  78. //-->  
  79. </SCRIPT>  

如果点了确定,只要不清cookie,以后访问都不会再提示,如果不点确定则每次都会提示,放在js文件里,全站包含,代码如下:

  1. <SCRIPT LANGUAGE="JavaScript">  
  2. <!--  
  3. var the_cookie = document.cookie;  
  4. var broken_cookie = the_cookie.split(":");  
  5. var the_visiteraccepted = unescape(broken_cookie[1]);  
  6. //  
  7. if (the_visiteraccepted=="undefined"){  
  8.         var tmp=confirm('中国人何时何地。');  
  9.         if(tmp==false){  
  10.                 window.close();  
  11.         }else{  
  12.                 var the_visiteraccepted = 1;            
  13.         var the_cookie = "ILoveChina=visiteraccepted:" + escape(the_visiteraccepted);                                   
  14.         document.cookie = the_cookie;  
  15.         }  
  16. }  
  17. //-->  
  18. </SCRIPT>  

总结:

1.cookie不是简单的name和value两个属性，还有expires,domain,path等属性，这个可以专门找cookie的概念来熟悉。

2.清cookie必须与设cookie时的domain与path一致。否则就不会清除而是追加。

cookie应该还有其他的很多方面的问题，希望大家可以帮笔者补充。

标签：

给我留言