详解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之大字符串的连接的StringBuffer 类
May 08 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
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输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP学习记录之数组函数
2018/06/01 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js查找节点的方法小结
2015/01/13 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python中条件判断语句的简单使用方法
2015/08/21 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python虚拟环境项目实例
2017/11/20 Python
详解supervisor使用教程
2017/11/21 Python
python统计字符的个数代码实例
2020/02/07 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
用python对excel查重
2020/12/07 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
DTD的含义以及作用
2014/01/26 面试题
七年级上册语文教学计划
2015/01/22 职场文书
初中家长意见
2015/06/03 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js