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

 


//@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 有个变量,,

弹出一次变量++

以后就不会在出来了。