详解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 Select操作大集合
May 26 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 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
linux命令之调试工具strace的深入分析
2013/06/03 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
php递归函数怎么用才有效
2018/02/24 PHP
让焦点自动跳转
2006/07/01 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript验证身份证号
2015/03/03 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
javascript异常处理实现原理详解
2020/02/17 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
python 从csv读数据到mysql的实例
2018/06/21 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
网络技术专业求职信
2014/02/18 职场文书
运动会方阵口号
2014/06/07 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
Python数据结构之队列详解
2022/03/21 Python
nginx之queue的具体使用
2022/06/28 Servers