详解jQuery的Cookie插件


Posted in Javascript onNovember 23, 2016

一、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);



//输反序列化出来的对象的姓名值
 }
 })

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
详解React中的组件通信问题
Jul 31 Javascript
node中koa中间件机制详解
Aug 22 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 #Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 #Javascript
解析jQueryEasyUI的使用
Nov 22 #Javascript
详解jQuery插件开发方式
Nov 22 #Javascript
AngularJS中isolate scope的用法分析
Nov 22 #Javascript
详解js界面跳转与值传递
Nov 22 #Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 #Javascript
You might like
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
一个用js实现的页内搜索代码
2007/05/23 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python 伯努利分布详解
2020/02/25 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
python爬取微博评论的实例讲解
2021/01/15 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
领导的自我鉴定
2013/12/28 职场文书
小学信息技术教学反思
2014/02/10 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python