博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery和js cookie的使用解析
阅读量:4361 次
发布时间:2019-06-07

本文共 3761 字,大约阅读时间需要 12 分钟。

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

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

一、cookie在jquery中的使用:

  1、引入相对应的插件:

  2、html模板例子:

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保存对象的例子如下:

  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();}
//读取cookiefunction 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"));	});

  

转载于:https://www.cnblogs.com/renxiaoren/p/5086417.html

你可能感兴趣的文章
$.ajax所犯的错误。success后面不执行
查看>>
Spring注入方式及注解配置
查看>>
cocos2dx blender 骨骼动画实现
查看>>
ARM基础
查看>>
eclipse
查看>>
Mybatis参数传递及返回类型
查看>>
关于Ubuntu使用笔记
查看>>
调整Tomcat上的参数提高性能[转]
查看>>
在Ajax方式产生的浮动框中,点击选项包含某个关键字的选项
查看>>
SDK 操作 list-view control 实例 -- 遍历进程
查看>>
由于SSH配置文件的不匹配,导致的Permission denied (publickey)及其解决方法
查看>>
65. Valid Number
查看>>
检查MySQL主从数据一致性
查看>>
结构化日志:出错时你最想要的好朋友
查看>>
Git常用命令总结
查看>>
[算法练习]Excel Sheet Column Title
查看>>
【原创】MapReduce编程系列之表连接
查看>>
IOS开发之Swift学习笔记
查看>>
【Java基础】用LinkedList实现一个简单栈的功能
查看>>
线段树C-A Simple Problem with Integers(树懒线段树)
查看>>