详解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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
Javascript动画效果(3)
Oct 11 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Python模块常用四种安装方式
2020/10/20 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
木工主管岗位职责
2013/12/08 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
优秀老师事迹材料
2014/02/05 职场文书
小组合作学习反思
2014/02/18 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年教师节感言
2015/08/03 职场文书
python中%格式表达式实例用法
2021/06/18 Python
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Python requests用法和django后台处理详解
2022/03/19 Python
实战Python爬虫爬取酷我音乐
2022/04/11 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android