详解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 相关文章推荐
js操作table示例(个人心得)
Nov 29 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
Sea.JS知识总结
May 05 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
详解原生js实现offset方法
Jun 15 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
浅析php学习的路线图
2013/07/10 PHP
简单实现php上传文件功能
2017/09/21 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
python实现ip查询示例
2014/03/26 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
使用python实现knn算法
2017/12/20 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
python爬取youtube视频的示例代码
2021/03/03 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
找工作最新求职信
2013/12/22 职场文书
开会迟到检讨书
2014/01/08 职场文书
安全演讲稿大全
2014/05/09 职场文书
测控技术自荐信
2014/06/05 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
英语通知范文
2015/04/22 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android