详解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 相关文章推荐
iframe实用操作锦集
Apr 22 Javascript
javascript实现2048游戏示例
May 04 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
JS实现百度搜索框
Feb 25 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
理解JS绑定事件
2016/01/19 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python list转矩阵的实例讲解
2018/08/04 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
给病人的慰问信
2015/03/23 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书