关于jQuery的cookies插件2.2.0版设置过期时间的说明

欢迎转载,转载请注明作者RunningOn

jQuery应该是各位用JavaScript做web开发的常用工具了,它有些插件能非常方便地操作cookie。

不过非常让人郁闷的是,网上几乎所有人对于这些插件所做的关于cookie过期/失效时间的说明都是含混的或不正确的。我被这玩意搞得实在不行了,去看了其中两个插件的源代码终于明白了是怎么一回事。为避免更多人中招,我就写下我RunningOn个人对这些cookie插件的理解。

首先要说明的是cookie插件国内主要流行的有两个,一个是早在2006年的不知道是什么版本号的叫cookie的插件,另一个是cookies 2.2.0版,注意后者的名字比前者多一个s,国内主要用的是后者。前者早已停止维护(或者说代码很少不需要维护)而且其下载链接已经从官网撤除了,后者的下载链接则到处是。你下的十有八九是后者,官方下载在:http://code.google.com/p/cookies/downloads/list

在我写这日志之前,网上的对jQuery操作cookies的插件的使用介绍几乎都是不正确的,主要是对于过期时间的设置不对(如果我错怪了谁,那我先道个歉)。

Cookies插件使用方法:

1. 不用说,首先你得下载jQuery及Cookies插件。

2. 在网页的<body>前加上:

<script type="text/javascript" src="http://513394217.blog.163.com/blog/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://513394217.blog.163.com/blog/jquery.cookies.2.2.0.min.js"></script>

src=后面的那一长串就是下载的jQuery和Cookies插件的文件名,如果你和我不一样就改改。

3. 如何添加/修改cookie并设定过期时间:

$.cookies.set(‘cookie_id‘, ‘cookie_value‘, { hoursToLive: 100 });

上面是添加或修改一个cookie,并将其过期/失效时间设定在100小时之后,注意大括号是必须的。

过期失效时间还有另外一个设置方式,指定一个绝对时间:

expireDate = new Date();
expireDate.setTime( expireDate.getTime() + ( 100 * 60 * 60 * 1000 ) );

$.cookies.set(‘cookie_id‘, ‘cookie_value‘, {expiresAt:expireDate});

expireAt参数精确到毫秒。大括号里还可以添加path, domain, secure等参数,这里不做介绍。如果hoursToLive和expiresAt都指定了,则以expiresAt为准。

4. 如何获取cookie

$.cookies.get(‘cookie_id‘); 

5. 如何删除cookie

$.cookies.del(‘cookie_id‘); 

常用的就是这么多了。cookies有更高级的用法,比如能将数组一口气全写入cookie,但不在本文的介绍范围了。

最后再提醒一下,如果你看到其它地方介绍jQuery操作cookie时用的这样语法$.cookie.set(‘cookie_id‘, ‘cookie_value‘, 7)或者$.cookie.set(‘cookie_id‘, ‘cookie_value‘, {expires: 7}),都是针对插件cookie而不是cookies的,更令人烦躁的是有些这样的文章后面附的下载链接却是cookies的,郁闷。

时间: 2024-11-08 18:52:32

关于jQuery的cookies插件2.2.0版设置过期时间的说明的相关文章

官宣 | 多多客小程序发布全插件化1.0版,插件市场正式上线

多多客小程序作为青否原班人马打造的小程序第三方平台,结合5年商城系统.近2年小程序SaaS平台研发及运营经验,重点发力小程序个性化和各类营销玩法,联合服务商.开发者.经营专家,共建服务生态,服务百万商家. 多多客小程序于2017年12月8日正式立项,历时8个月于2018年8月17日开启SaaS版公测,市场好评连连,9月4日上线开源版. 在开源版发布的近2个月时间里,我们综合来自开发者.商家等多方面建议,正式推出了多多客插件市场,以及我们全插件化的1.0正式版本. |?插件化 前后端完全分离的项目

网页换肤,模块换肤,jQuery的Cookie插件使用(转)

具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

JQuery:cookie插件

JQuery居然没有操作cookie相关的函数,搜了下官方有个cookie的插件. 简单使用方法: <head> <title>JQuery-Cookie插件</title> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript" src="jq

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

【JQ成长笔记】jQuery Validate验证插件

validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 需要引入的js 1 <script type="text/javascript" src="../../scripts/jquery-1.3.1.js&qu

jQuery图片切换插件jquery.cycle.js

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src

jquery easyui+sparkline插件+jqplot插件实现数据表行内插入线形图

Jquery easyui : 实现前端数据包格式化输出,支持多种模块式定义,只需要添加相应的预设参数即可实现丰富的前端. 资料参考: http://www.jeasyui.com/ Jquery sparkline: 基于jQuery 的js插件,底层调用html5的canvas标签,并通过js动态实现在数据表行内画条形图或趋势图,操作简单,可实现不同类型的图形化,如线形图,饼状图,柱形图. 资料参考:http://omnipotent.net/jquery.sparkline/#s-docs