详解jQuery的Cookie插件
一、jQuery.Cookie.js插件是一个轻量级的Cookie管理插件。
特别提醒，今日发现一个特别的错误，google浏览器提示：has no method $.cookie。火狐浏览器提示:$.cookie is not a function;调试了半天，终于找到原因，如果同一个页面两次或者多次引入jQuery插件就会报此错误。
使用方法：
1、引入jQuery与jQuery.Cookie.js插件。
<script src="jQuery.1.8.3.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script>
2、函数。
语法：$.cookie(名称,值,[option])
(1)读取cookie值
$.cookie(cookieName) cookieName:要读取的cookie名称。
示例：$.cookie("username"); 读取保存在cookie中名为的username的值。
(2)写入设置Cookie值：
$.cookie(cookieName,cookieValue); cookieName:要设置的cookie名称，cookieValue表示相对应的值。
示例: $.cookie("username","admin"); 将值"admin"写入cookie名为username的cookie中。
$.cookie("username",NULL); 销毁名称为username的cookie
(3) [option]参数说明：
expires: 有限日期，可以是一个整数或一个日期(单位：天)。 这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了
path: cookie值保存的路径，默认与创建页路径一致。
domin: cookie域名属性，默认与创建页域名一样。 这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置 ".xxx.com"
secrue: 一个布尔值，表示传输cookie值时，是否需要一个安全协议。
示例： $.cookie("like", $(":radio[checked]").val(), {
path: "/", expiress: 7
})
一个完整设置与读取cookie的页面代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习2</title>
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#username").val($.cookie("username"));
if ($.cookie("like") == "刘德华") {
$(":radio[value='刘德华']").attr("checked", 'checked')
}
else {
$(":radio[value='张学友']").attr("checked", 'checked')
}
$(":button").click(function () {
$.cookie("username", $("#username").val(), {
path: "/", expires: 7
})
$.cookie("like", $(":radio[checked]").val(), {
path: "/", expiress: 7
})
})
})
</script>
</head>
<body>
<p><input type="text" id="username" value="" /></p>
<p>
<input type="radio" name="like" value="刘德华" />刘德华
<input type="radio" name="like" value="张学友" />张学友
</p>
<p><input type="button" value="保存" /></p>
</body>
</html>
cookie本质上是一个txt文本，因此只能够存入字符串，对象通常要序列化之后才能存入cookie，而取的时候要反序列才又能得到对象。
$(function () {
if ($.cookie("o") == null) {
var o = { name: "张三", age: 24 };
var str = JSON.stringify(o); //对序列化成字符串然后存入cookie
$.cookie("o", str, {
expires:7 //设置时间，如果此处留空，则浏览器关闭此cookie就失效。
});
alert("cookie为空");
}
else {
var str1 = $.cookie("o");
var o1 = JSON.parse(str1); //字符反序列化成对象
alert(o1.name); //输反序列化出来的对象的姓名值
}
})
以上就是本文的全部内容，希望对大家有所帮助，谢谢对脚本之家的支持！
相关文章
这篇文章主要介绍了jquery移除、绑定、触发元素事件使用示例详解,需要的朋友可以参考下2014-04-04
在深入了解jQuery的各个细节之前，需要对jQuery的设计思想有一个大致的了解。在遇到问题时， 知道应该使用jQuery的哪一个功能，然后迅速从手册中找到具体的用法。本文将详细介绍jQuery的设计思想。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了jQuery中before()方法用法,以实例形式分析了before()方法的功能、定义与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery实现的输入框选择时间插件用法,实例分析了jQuery插件jquery.settime.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断.有需要的小伙伴可以参考下2015-04-04
这篇文章主要介绍了jQuery事件多次绑定与解绑问题,结合实例形式分析了jQuery事件多次绑定情况下的运行情况,以及解绑相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要为大家详细介绍了jQuery表单事件实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了jquery拖拽自动排序插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数2015-11-11
前端时间写项目用到了ajaxForm这个插件，可以用它提交表单和上传图片，听起来和正常的form表单提交没什么区别，只不过是ajax提交，无需刷新页面,下面通过实例给大家介绍jQuery表单插件ajaxForm，需要的朋友参考下吧2017-01-01
最新评论