欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery和js cookie的使用解析

程序员文章站 2022-07-13 12:08:51
...

  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"));
	});