JQuery的cookie使用方法——和派孔明

最新推荐文章于 2022-11-09 11:34:06 发布

xyphf_和派孔明

最新推荐文章于 2022-11-09 11:34:06 发布

阅读量667

点赞数

分类专栏：数据处理文章标签： cookie jquery

本文链接：https://blog.csdn.net/xyphf/article/details/51817259

版权

数据处理专栏收录该内容

56 篇文章 1 订阅

订阅专栏

1.首先包含jQuery的库文件，在后面包含 jquery.cookie.js 的库文件。
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js" type="text/javascript"></script>

2.使用方法：
创建一个cookie并设置有效时间为 7天;
$.cookie('name', 'value', { expires: timeout });
注意：如果不设置 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。如：$.cookie('the_cookie', 'the_value');

3.读取cookie:
$.cookie('name'); // cookie存在 => 'the_value'
$.cookie('age'); // cookie不存在 => null

4.删除cookie，通过传递null作为cookie的值即可：

$.cookie('name', null);

JQuery.cookie相关配置参数介绍，如：
$.cookie('user',
'和派孔明',
{
expires:3,
//数字单位为“天”,如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。

path: '/',
//定义cookie的有效路径。默认情况下，该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为）。
//如果你想在整个网站中访问这个cookie需要这样设置有效路径：path: '/'。
//如果你想删除一个定义了有效路径的 cookie，你需要在调用函数时包含这个路径:
//$.cookie('the_cookie', null, {path: '/' });。 domain: 'example.com' </span>

secure: true,

//默认值：false。如果为true，cookie的传输需要使用安全协议（HTTPS）。

raw: true
//默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用encodeURIComponent 编码，
// decodeURIComponent 解码）。要关闭这个功能设置 raw: true 即可。
}

//以下为demo
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<style>
.div1{width:200px;height:200px;background:red;margin:0 auto;}
</style>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//创建$.Cookie('name','value',{expires:过期时间})
	$.cookie('user','和派孔明',{expires:3,path: '/'});
	$.cookie('age',18,{expires:3});
	$.cookie('address','陆家嘴金融城',{expires:3,path: '/'});

	//读取Cookie
	alert("姓名:"+$.cookie('user'));
	alert("年龄:"+$.cookie('age')+"岁");
	alert("地址:"+$.cookie('address'));

	//删除Cookie
	$('.div1').click(function(){
		$.cookie('age',null);
		alert("年龄已被删除为,当前值为:"+$.cookie('age'));<strong><span style="color:#ff0000;">//null
	})
})
</script>
</head>
<body>

<div class="div1"></div>

</body>
</html>