开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《扩展 jQuery》——6.2 jQuery Cookie插件

简介: 函数插件的另一个很好的例子是Klaus Hartl写的Cookie插件。它允许开发者以一种很简单的方式来读写页面上的 cookie,而不需要知道这些cookie使用的格式和编码。开发者可以在每个用户的电脑上保存一些网站的状态信息来增强用户体验。因此,它不操作页面上的元素集合。
+关注继续查看

本节书摘来自异步社区《扩展 jQuery》一书中的第6章,第6.2节,作者:【美】Keith Wood著,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.2 jQuery Cookie插件

函数插件的另一个很好的例子是Klaus Hartl写的Cookie插件。它允许开发者以一种很简单的方式来读写页面上的 cookie,而不需要知道这些cookie使用的格式和编码。开发者可以在每个用户的电脑上保存一些网站的状态信息来增强用户体验。因此,它不操作页面上的元素集合。

6.2.1 Cookie的交互
Cookies是存储在用户机器上并与一个或几个页面相关联的少量数据。一个网页的cookie在它的页面上是可访问的,并在每次请求时都会被回传到服务器上,这样就可以把一些状态维护在客户端机器上。Cookie在一定时间后会过期,并从用户机器上被删除。

要使用Cookie插件为当前页面设置一个cookie,开发者需要指定它的名字和值。例如,为了标识是否已经在每个用户第一次访问网站时显示了介绍信息,开发者可以在 cookie 中保存这个信息:

screenshot

开发者也可以提供额外的参数来定制 cookie,设置它的过期时间(默认情况下,cookie随着当前会话的结束而过期)、它要应用的域和路径、是否需要安全传输、是否需要加密cookie值:

screenshot

获取cookie值时只需要提供它的名字。如果给定的名字没有cookie,则返回null。在网站介绍信息的例子中,开发者应该检查这个值,仅在它为null的情况下显示介绍信息:

screenshot

通过把cookie的值设置为null来删除它:

screenshot

正如读者看到的,这个插件遵守了“在所有地方使用唯一的名字”原则。根据每次调用所提供的参数个数和类型,它提供了不同的功能。

现在读者已经知道 Cookie 插件能做什么了,接下来将会看到如何实现它的功能。尽管Cookie插件没有使用笔者的框架,但基本结构和原则仍然适用。

6.2.2 读写cookie
与之前的控件一样,它的代码对于其余的JavaScript世界来说都是受保护的,唯一访问点就是jQuery对象自己。

程序清单6.5 封装插件代码

screenshot

通过一个匿名函数1把这个插件与外部 JavaScript 隔离,并遵守了“利用作用域隐藏实现细节”和“不要依赖$与jQuery的等同性”原则2。这个插件极少使用jQuery自己,它只定义了一个函数——Cookie,并把它添加到jQuery对象中3,这使用了另外两个原则:“在所有地方使用唯一的名字”和“把一切都放在jQuery对象中”。

这个插件有两个操作模式——读和写cookie,使用哪个模式则由调用时传入的参数个数和类型来决定。首先来处理写cookie的情况。

程序清单6.6 写一个cookie值

screenshot

如果提供了不止一个参数,并且第二个不是一个object,则为写cookie模式1。如果值为null,则删除cookie2,把超时时间设置为-1,代表这个 cookie已经过期并作废。如果expires选项是一个数字,则被认为是从今天开始的天数3。最终,cookie值被转换为字符串,这个 cookie 和它的设置一起被写入浏览器4。正如预期的那样使用了“使用合理的默认值”原则,使得当前域和路径上的 cookie 随着当前会话的结束而过期。编码后的cookie名和值作为函数的调用结果返回,尽管大部分时候开发者不需要知道或使用这个值。

如果是取值模式,插件将继续处理,代码如程序清单6.7所示。

程序清单6.7 读取一个cookie值

screenshot

首先,读取作为第二个参数传入的所有选项1。如果没有提供,则使用默认值。获取当前cookie值(当前页面上的所有cookie),并分离为独立的键值对2。根据传入的名字检查每一对3,并返回相应的值。如果没有匹配到,则返回nul4。

开发者可以通过更新$.cookie.defaults来设置所有cookies的默认选项:

screenshot

Cookie插件的完整代码可以从本书的网站上下载。

需要知道

开发函数插件来添加不直接操作选定元素的功能。

直接扩展$来添加额外的功能。

通过使用作用域来保护自己的代码以及防止名字冲突。

通过参数控制插件的行为,但是没有设置参数时要提供合适的默认值。
自己试试看

写一个函数插件来格式化时间,调用方式如下:

var time = $.formatTime(new Date(0, 0, 0, 12, 34, 0));

接收一个Date参数对象,从中提取时间。如果没有设置,则使用当前时间。把时间格式化为hh:mmAP。想进一步挑战的话,添加可选的第一个参数(Boolean)用来指定是否格式化为12时制,或者24时制。

提示: Date对象有getHours和getMinutes函数。使用new Date()获取当前日期/时间。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vim Vundle 插件管理器
/********************************************************************** * Vim Vundle 插件管理器 * 说明: * 话说Vim也已经用了挺久了,一直没有使用插件,有些时候不使用插件总 * 感觉缺点什么,当然也是因为没有找到一些好的管理插件的方法,这次不 * 小心找到了Vundle,感觉很不错,尝试用起来,这样效率能提高不少。
1089 0
能跨域和跨浏览器的flashcookie for jquery插件
对于写网站时需要跨域和跨浏览器的可以看看这个。 引入jquery  和 swfstore.min.js 就可以了,蛮简单好用的,会jquery基础就可以咯。   mySwfStore.set('myKey', '值'); //设置flashcookie mySwfStore.get('myKey'); //读取flashcookie 还有清除等命令在例子里,大家可以自己看哦。
860 0
打造简易可扩展的jQuery/CSS3 Tab菜单
原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜单比较假单,你也可以用CSS代码定制你自己需要的外观。
796 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载