详解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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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 cli换行示例
2014/04/22 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php session的应用详细介绍
2017/03/22 PHP
offsetParent 算法分析
2010/04/05 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python单例模式的两种实现方法
2017/08/14 Python
在python里面运用多继承方法详解
2019/07/01 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python定义一个函数的方法
2020/06/15 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
诚信考试倡议书
2014/04/15 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
感谢信格式范文
2015/01/22 职场文书
面试复试通知单
2015/04/24 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang