jQuery中cookie插件用法实例分析


Posted in Javascript onDecember 04, 2015

本文实例讲述了jQuery中cookie插件用法。分享给大家供大家参考,具体如下:

Jquery里面提供了很多插件,方便,安全,快速实用。这节一起熟悉下JQUERY中操作Cookie的插件,插件名称为jquery.cookie.js,可以去官方网站下载。

下载地址: http://plugins.jquery.com/project/cookie.

插件主要报告如下几个用法

1.创建Cookie

创建一个名称为username,值为 admin的cookie ,如下

$.cookie('username',"admin");

当然cookie还包括路径,过期时间等其他参数,一起看下其他参数的用法
$.cookie('username', 'admin', {expires: 7, path: '/', domain: 'jquery.com', secure: true});

expires:表示过期时间,默认为天,如上表示过期时间为7天,如果省略过期时间,表示关闭浏览器时候,cookie将被删除

也可以设置cookie的过期时间,如下设置3分钟后过期

var dt= new date();
dt.settime(date.gettime() + (3* 60 * 1000));
$.cookie('username', 'admin', { expires: dt});

path:定义cookie的有效路径,默认情况下路径为创建cookie网页所在的路径,如果想让整个网站访问到,路径设置为path: '/'

domain:设置cookie所在的域

secure:  如果为true表示cookie的传输需要使用https安全协议,默认为false

2.删除Cookie

可以使用两种方法

$.removeCookie("username");
$.cookie('username',"null");

3.读取cookie

var account = $.cookie('username');

如果没有写入cookie,读取到的值为undefined

附:jquery.cookie.js完整代码如下:

/*!
 * jQuery Cookie Plugin v1.4.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2006, 2014 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD (Register as an anonymous module)
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function ($) {
  var pluses = /\+/g;
  function encode(s) {
    return config.raw ? s : encodeURIComponent(s);
  }
  function decode(s) {
    return config.raw ? s : decodeURIComponent(s);
  }
  function stringifyCookieValue(value) {
    return encode(config.json ? JSON.stringify(value) : String(value));
  }
  function parseCookieValue(s) {
    if (s.indexOf('"') === 0) {
      // This is a quoted cookie as according to RFC2068, unescape...
      s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
    }
    try {
      // Replace server-side written pluses with spaces.
      // If we can't decode the cookie, ignore it, it's unusable.
      // If we can't parse the cookie, ignore it, it's unusable.
      s = decodeURIComponent(s.replace(pluses, ' '));
      return config.json ? JSON.parse(s) : s;
    } catch(e) {}
  }
  function read(s, converter) {
    var value = config.raw ? s : parseCookieValue(s);
    return $.isFunction(converter) ? converter(value) : value;
  }
  var config = $.cookie = function (key, value, options) {
    // Write
    if (arguments.length > 1 && !$.isFunction(value)) {
      options = $.extend({}, config.defaults, options);
      if (typeof options.expires === 'number') {
        var days = options.expires, t = options.expires = new Date();
        t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
      }
      return (document.cookie = [
        encode(key), '=', stringifyCookieValue(value),
        options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
        options.path ? '; path=' + options.path : '',
        options.domain ? '; domain=' + options.domain : '',
        options.secure ? '; secure' : ''
      ].join(''));
    }
    // Read
    var result = key ? undefined : {},
      // To prevent the for loop in the first place assign an empty array
      // in case there are no cookies at all. Also prevents odd result when
      // calling $.cookie().
      cookies = document.cookie ? document.cookie.split('; ') : [],
      i = 0,
      l = cookies.length;
    for (; i < l; i++) {
      var parts = cookies[i].split('='),
        name = decode(parts.shift()),
        cookie = parts.join('=');
      if (key === name) {
        // If second argument (value) is a function it's a converter...
        result = read(cookie, value);
        break;
      }
      // Prevent storing a cookie that we couldn't decode.
      if (!key && (cookie = read(cookie)) !== undefined) {
        result[name] = cookie;
      }
    }
    return result;
  };
  config.defaults = {};
  $.removeCookie = function (key, options) {
    // Must not alter options, thus extending a fresh object...
    $.cookie(key, '', $.extend({}, options, { expires: -1 }));
    return !$.cookie(key);
  };
}));

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
常用的js方法合集
Mar 10 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 #Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 #Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 #Javascript
给before和after伪元素设置js效果的方法
Dec 04 #Javascript
全面解析Bootstrap手风琴效果
Apr 17 #Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 #Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 #Javascript
You might like
php设计模式 Composite (组合模式)
2011/06/26 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
深入分析PHP设计模式
2020/06/15 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
Node.js文件操作详解
2014/08/16 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python中tab键是什么意思
2020/06/18 Python
中专生自荐信
2013/10/12 职场文书
大学军训感言800字
2014/02/27 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
学生会部长竞选稿
2015/11/19 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android
关于MySQL中explain工具的使用
2023/05/08 MySQL