详解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 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
在vue中使用防抖函数组件操作
Jul 26 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
PHP 的 __FILE__ 常量
2007/01/15 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
vue组件name的作用小结
2018/05/23 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python numpy数组复制使用实例解析
2020/01/10 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
《挑山工》的教学反思
2014/02/16 职场文书
微信营销策划方案
2014/02/24 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
2015年行政部工作总结
2015/04/28 职场文书
关于幸福的感言
2015/08/03 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
django上传文件的三种方式
2021/04/29 Python