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\文件夹下。通常的命名格式为：[e-mail]。 

 

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

 

//@charset "utf-8"
var util = util || {};

util.setCookie = function (sName, sValue, oExpires, sPath, sDomain, bSecure) {
    var sCookie = sName + '=' + encodeURIComponent(sValue);
    if (oExpires) {
        sCookie += '; expires=' + oExpires.toGMTString();
    };
    if (sPath) {
        sCookie += '; path=' + sPath;
    };
    if (sDomain) {
        sCookie += '; domain=' + sDomain;
    };
    if (bSecure) {
        sCookie += '; secure';
    };
    document.cookie = sCookie;
};

util.getCookie = function (sName) {
    var sRE = '(?:; )?' + sName + '=([^;]*)';
    var oRE = new RegExp(sRE);
    if (oRE.test(document.cookie)) {
        return decodeURIComponent(RegExp['$1']);
    } else {
        return null;
    };
}

util.deleteCookie = function (sName, sPath, sDomain) {
    this.setCookie(sName, '', new Date(0), sPath, sDomain);
}

// function getUrlParam(item) {
//     var value = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)", "i"));
//     return value ? value[1] : value;
// }

// 获取userid通过cookie

function getUserid() {
    return util.getCookie('userid');
}

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

 

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

 

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

代码如下：

 

//@charset "utf-8"
/*新手引导*/
var oImg=$("#oGuide").find("img")[0];
var arrUrl = [ 'images/y1.png', 'images/y2.png','images/y3.png','images/y4.png' ];
var num=0;
var onOff=true;

function newguide(){
	oImg.src = arrUrl[num];
}

newguide();
$(".newleft").click(function(){
	//$(".newleft").css("background","none");
	num --;
	if(num == -1){
		if(onOff){
			num=0;
			
		}else{
			num=arrUrl.length-1;
		}
	}
	newguide();
});
$(".newright").click(function(){
	num ++
	if(num == arrUrl.length){
		if(onOff){
			num=arrUrl.length-1;
			$(".newbie").hide();
			sethaspopguide();
		}else{
			num=0;
		}
	}
	newguide();
});
$(".newclose").click(function(){
	$(".newbie").hide();
        sethaspopguide();
});

/*设置cookie用户在点击后不显示新手引导*/
var hasPopguide = util.getCookie('gsrl_haspopguide');
if(hasPopguide == 1){
	$(".newbie").hide();
}else{
	$(".newbie").show();
}

/*设置cookie值*/
function sethaspopguide(){
	var expire = new Date((new Date()).getTime() + 24 * 365 * 600000);
	util.setCookie('gsrl_haspopguide', 1, expire, '/', document.domain, 0);		
}

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

 

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

 

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

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

代码如下：

/**
*输入检索关键字提示小财神
*/
var showangelIndex = 0;
var arrText=['买','卖','盈','亏','分红','配股','增发','派息','持股','交易记录'];
$('.subtitle_edit').live('blur', function (event) {
	
	for(var i=0;i<arrText.length;i++){
		//alert($(".edit_title_a").find(a).index(0).html());
	 	var text = $(this).val();
		
		if (text.indexOf(arrText[i])!=-1) {
			/*$(".angel").slideDown("slow");	
			showangelIndex ++;
			if(showangelIndex > 3){
				$(".angel").hide();//只给弹出来三次？
			}*/
			var hasPopguides = util.getCookie('gsrl_haspopguides');
			hasPopguides++;
			if(hasPopguides >= 4){
				$(".angel").hide();
			}else{
				$(".angel").slideDown("slow");
			}
			sethaspopguides(hasPopguides);
					
			}
		}
});

$(".angel-close").click(function(){
	$(".angel").fadeOut("slow");
});

/*设置cookie值*/
function sethaspopguides(num){
	var expire = new Date((new Date()).getTime() + 24 * 365 * 600000);
	util.setCookie('gsrl_haspopguides', num , expire, '/', document.domain, 0);	
	
}

 

注释的部分用的是全局变量来实现计数三次，隐藏，但是刷新页面之后又会重新来计数，所以要用的cookie，，

在这里设置cookie 有个变量，，

弹出一次变量++

以后就不会在出来了。