详解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 相关文章推荐
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
一个简易需要注册的留言版程序
2006/10/09 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
什么时候用assert
2015/05/08 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
高三地理教学反思
2014/01/11 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
公司开业致辞
2015/07/29 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android