jquery和js cookie的使用解析

　　JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie.

　　在这里分别通过js和jquery两种方式说明对cookie的具体使用：

一、cookie在jquery中的使用：

　　1、引入相对应的插件：

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

　　2、html模板例子：

<form action="">
        <div>
            <label>姓名：</label><input type="text" id="name" val=""/>
        </div>
        <div>
            <label>地址：</label><input type="text" id="address" val=""/>
        </div>
        <button type="button" id="saveCookie">保存cookie</button>
        <button type="button" id="getCookie">获得cookie</button>
        <button type="reset" id="resetCookie">重置cookie</button>
    </form>

3、cookie相关的jquery操作代码：

	$(function(){
		$("#name").val($.cookie("name"));
		$("#address").val($.cookie("address"));
		//将值保存到cookie 以key-value的形式
		$("#saveCookie").bind("click",function(){
			$.cookie("name",$("#name").val(),{expires:1});
			$.cookie("address",$("#address").val(),{expirse:1});
		});
		//获得cookie中对应的值 
	   $("#getCookie").bind("click",function(){
			console.log($.cookie("name"));
			console.log($.cookie("address"));
		});
		//将cookie的key对应的value值设置为null
	   $("#resetCookie").bind("click",function(){
			$.cookie("name",null);
			$.cookie("address",null);
	   });
	});

　　具体解析：

　　a:读取cookie：  $.cookie(key);

　　b:写入cookie：  $.cookie(key,value,[{option}]);

　　　　[option]:包括的参数有：path/ expires /domin /secrue　

　　　　　　expires:有限日期，可以是一个整数或一个日期(单位：天)。　　这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了

　　　　　　path: cookie值保存的路径，默认与创建页路径一致。

　　　　　　domin: cookie域名属性，默认与创建页域名一样。　　这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置　　".xxx.com"

　　　　　　secrue: 一个布尔值，表示传输cookie值时，是否需要一个安全协议。默认值：false。

　　　　　　raw: 默认值：false。 默认情况下，读取和写入cookie的时候自动进行编码和解码（使用encodeURIComponent编码，decodeURIComponent解码）。

　　　　　　要关闭这个功能设置raw: true即可。

　　　　注：1.   当没有指明cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为“会话cookie（session cookie）”

　　　　　　　　若设置了日期，那么设置的cookie被称为“持久cookie”。

　　　　　　2.   在默认情况下，只有设置cookie的网页才能读取该cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。

　　　　　　　　cookie的路径用于设置能够读取cookie的顶级目录。将这个路径设置为网站的根目录(path: '/')，可以让所有网页都能互相读取cookie（一般不要这样设置，防止出现冲突）

　　c:销毁某个key的值： $.cookie(key,NULL);

　　　　注：如果你想删除一个定义了有效路径的cookie，你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, { path: '/' });。

4、操作中需要注意的事项：

　　a: 如果google浏览器提示：has no method $.cookie。火狐浏览器提示:$.cookie is not a function;

　　　 可能的原因是：同一个页面两次或者多次引入Jquery插件就会报此错误。

　　b: cookie本质上是一个txt文本，因此只能够存入字符串，对象通常要序列化之后才能存入cookie，而取的时候要反序列才又能得到对象。

 　　cookie保存对象的例子如下：

<form action="">
		<div>
			<label>姓名：</label><input type="text" id="name" val=""/>
		</div>
		<div>
			<label>地址：</label><input type="text" id="address" val=""/>
		</div>

		<button type="button" id="savePerCookie">保存人cookie</button>
		<button type="button" id="getPerCookie">获得人cookie</button>
	</form>



<script type="text/javascript">
	$(function(){
		//保存对象到cookie
		$("#savePerCookie").bind("click",function(){
			 var person=new Object();
			 person.name=$("#name").val();
			 person.address=$("#address").val();
			 var personStr=JSON.stringify(person);
			 $.cookie("person",personStr);
		});
		//获得人对象
		$("#getPerCookie").bind("click",function(){
			if($.cookie("person")){
				var personStr=$.cookie("person");
				var person=JSON.parse(personStr);
				$("#name").val(person.name);
				$("#address").val(person.address);
			}
		});
	});

</script>

　　5、检查cookie是否可用的方法

	$(document).ready(function() {
		var dt = new date();
		dt.setseconds(dt.getseconds() + 60);
		document.cookie ="cookietest=1; expires="+ dt.togmtstring();
		var cookiesenabled = document.cookie.indexof("cookietest=") != -1;
		if(!cookiesenabled){
			//cookies不能用……..
		}
	}); 

二、js操作cookie的方法

　　使用js操作cookie，不需要引入其他的插件，使用插件进行操作cookie很容易，但是有时候会出现不兼容的情况，这时候，我们就要回归基础，使用最基础的方法实现我们的目的。接下来，我们来看一下用js如何进行cookie的操作：

1、cookie的基础原理

　　cookie中保存数据是用键值对的方式，即key-value。各个cookie之间用“;”分号隔开。

2、设置cookie、读取cookie、销毁cookie的function

//设置cookie 
function setCookie(name,value,time){
	var  exp = new Date();
	var Days = 30;
	if(time!=null){
		Days=time;
	}
	exp.setTime(exp.getTime() + Days*24*60*60*1000);  //expires 表示的是时间点 例如：Thu, 28 Jan 2016 08:46:01 GMT
	document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();
}

//读取cookie
function getCookie(name){
	var arr,reg=new RegExp("(^| )"+name+"=([^;]*(;|$))");
	if(arr=document.cookie.match(reg))
		return unescape(arr[2]).replace(";","");
	else
		return null;
}

//销毁cookie 
function delCookie(){
	var exp = new Date();
	exp.setTime(exp.getTime() - 1);
	var cval=getCookie(name);
	if(cval!=null)
	document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

3、function的应用

	$("#saveCookie").bind("click",function(){
		setCookie("name",$("#name").val(),1);
		setCookie("address",$("#address").val(),1);
	});
	$("#getCookie").bind("click",function(){
		$("#name").val(getCookie("name"));
		$("#address").val(getCookie("address"));
	});