详解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获取地址栏参数
Dec 22 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
深入PHP异步执行的详解
2013/06/03 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
外科护士长工作总结
2015/08/12 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript