javascript中cookie的使用分析

1，cookie的概述

2，cookie的使用

 

1，JavaScript中的另一个机制：cookie，则可以达到真正全局变量的要求。 cookie是浏览器 提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。

cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。 

不同的浏览器对cookie的实现也不一样，但其性质是相同的。例如在Windows 2000以及Windows xp中，cookie文件存储于documents and settings\userName\cookie\文件夹下。通常的命名格式为：userName@domain.txt。 

 

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。 

 

（1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。 

 

（2）跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。

 

（3）定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。 

 

（4）创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。 

 

当然，上述应用仅仅是cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种： 

 

（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能； 

（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的； 

（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除； 

（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

 

 

2，理论的概述好了，我们直接上代码来的更加直观，，在项目中可以直接使用

先调用cookie.js

 

Js代码  

1. //@charset "utf-8"  
2. var util = util || {};  
3.   
4. util.setCookie = function (sName, sValue, oExpires, sPath, sDomain, bSecure) {  
5.     var sCookie = sName + '=' + encodeURIComponent(sValue);  
6.     if (oExpires) {  
7.         sCookie += '; expires=' + oExpires.toGMTString();  
8.     };  
9.     if (sPath) {  
10.         sCookie += '; path=' + sPath;  
11.     };  
12.     if (sDomain) {  
13.         sCookie += '; domain=' + sDomain;  
14.     };  
15.     if (bSecure) {  
16.         sCookie += '; secure';  
17.     };  
18.     document.cookie = sCookie;  
19. };  
20.   
21. util.getCookie = function (sName) {  
22.     var sRE = '(?:; )?' + sName + '=([^;]*)';  
23.     var oRE = new RegExp(sRE);  
24.     if (oRE.test(document.cookie)) {  
25.         return decodeURIComponent(RegExp['$1']);  
26.     } else {  
27.         return null;  
28.     };  
29. }  
30.   
31. util.deleteCookie = function (sName, sPath, sDomain) {  
32.     this.setCookie(sName, '', new Date(0), sPath, sDomain);  
33. }  
34.   
35. // function getUrlParam(item) {  
36. //     var value = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)", "i"));  
37. //     return value ? value[1] : value;  
38. // }  
39.   
40. // 获取userid通过cookie  
41.   
42. function getUserid() {  
43.     return util.getCookie('userid');  
44. }  

 做了一个设置cookie和获取cookie的代码

 

这个js在项目直接调用，然后在改用的时候设置一下，，，

 

如：新手引导页面要只出来一次，

代码如下：

 

Js代码  

1. //@charset "utf-8"  
2. /*新手引导*/  
3. var oImg=$("#oGuide").find("img")[0];  
4. var arrUrl = [ 'images/y1.png', 'images/y2.png','images/y3.png','images/y4.png' ];  
5. var num=0;  
6. var onOff=true;  
7.   
8. function newguide(){  
9.     oImg.src = arrUrl[num];  
10. }  
11.   
12. newguide();  
13. $(".newleft").click(function(){  
14.     //$(".newleft").css("background","none");  
15.     num --;  
16.     if(num == -1){  
17.         if(onOff){  
18.             num=0;  
19.               
20.         }else{  
21.             num=arrUrl.length-1;  
22.         }  
23.     }  
24.     newguide();  
25. });  
26. $(".newright").click(function(){  
27.     num ++  
28.     if(num == arrUrl.length){  
29.         if(onOff){  
30.             num=arrUrl.length-1;  
31.             $(".newbie").hide();  
32.             sethaspopguide();  
33.         }else{  
34.             num=0;  
35.         }  
36.     }  
37.     newguide();  
38. });  
39. $(".newclose").click(function(){  
40.     $(".newbie").hide();  
41.         <span style="font-size: 1em; line-height: 1.5;">sethaspopguide();</span>  
42. });  
43.   
44. /*设置cookie用户在点击后不显示新手引导*/  
45. var hasPopguide = util.getCookie('gsrl_haspopguide');  
46. if(hasPopguide == 1){  
47.     $(".newbie").hide();  
48. }else{  
49.     $(".newbie").show();  
50. }  
51.   
52. /*设置cookie值*/  
53. function sethaspopguide(){  
54.     var expire = new Date((new Date()).getTime() + 24 * 365 * 600000);  
55.     util.setCookie('gsrl_haspopguide', 1, expire, '/', document.domain, 0);       
56. }  

 这里的过期时间很久，基本上是不过期的。

 

在这里的新手引导页面中，有一个下一页下一页的，，一共四页，，，上面有个关闭，，点击到关闭，则永远不出来了，，或者把每一页都看过到最后一页之后也永远不在出来了。

 

下面讲有这样一个需求，就是在输入框中输入有关”买“，”卖“等字的时候出来一个小tip。。但是每个用户只能出来三次tip，，三次以后照样输入买也不会出来tip了。。

那么我们要设置cookie是3次。。

代码如下：

Js代码  

1. /** 
2. *输入检索关键字提示小财神 
3. */  
4. var showangelIndex = 0;  
5. var arrText=['买','卖','盈','亏','分红','配股','增发','派息','持股','交易记录'];  
6. $('.subtitle_edit').live('blur', function (event) {  
7.       
8.     for(var i=0;i<arrText.length;i++){  
9.         //alert($(".edit_title_a").find(a).index(0).html());  
10.         var text = $(this).val();  
11.           
12.         if (text.indexOf(arrText[i])!=-1) {  
13.             /*$(".angel").slideDown("slow");     
14.             showangelIndex ++; 
15.             if(showangelIndex > 3){ 
16.                 $(".angel").hide();//只给弹出来三次？ 
17.             }*/  
18.             var hasPopguides = util.getCookie('gsrl_haspopguides');  
19.             hasPopguides++;  
20.             if(hasPopguides >= 4){  
21.                 $(".angel").hide();  
22.             }else{  
23.                 $(".angel").slideDown("slow");  
24.             }  
25.             sethaspopguides(hasPopguides);  
26.                       
27.             }  
28.         }  
29. });  
30.   
31. $(".angel-close").click(function(){  
32.     $(".angel").fadeOut("slow");  
33. });  
34.   
35. /*设置cookie值*/  
36. function sethaspopguides(num){  
37.     var expire = new Date((new Date()).getTime() + 24 * 365 * 600000);  
38.     util.setCookie('gsrl_haspopguides', num , expire, '/', document.domain, 0);   
39.       
40. }