详解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遇到页面卡死的解决方法
Mar 12 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
JavaScript实现五子棋小游戏
Oct 26 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使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
利用php输出不同的心形图案
2016/04/22 PHP
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Python标准库与第三方库详解
2014/07/22 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python组合无重复三位数的实例
2018/11/13 Python
详解python中init方法和随机数方法
2019/03/13 Python
python实现图片九宫格分割
2021/03/07 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python实现飞机大战项目
2020/03/11 Python
python操作redis数据库的三种方法
2020/09/10 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
机电一体化自荐信
2013/12/10 职场文书
初中生物教学反思
2014/01/10 职场文书
事务机电主管工作职责
2014/02/25 职场文书
辩护词范文大全
2015/05/21 职场文书
网络营销实训总结
2015/08/03 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书