给网站加一个带有效期的弹出框_Jquery Cookie应用

原创 代笔写书  2018-08-28 20:09:34  阅读 328 次 评论 0 条
广告位出售

Cookies 是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术。当你浏览某网站时,你硬盘上会生产一个非常小的文本文件,它可以记录你的用户 ID、密码、浏览过的网页、停留的时间等信息。

给网站加一个带有效期的弹出框_Jquery Cookie应用 源码分享

当你再次来到该网站时,网站通过读取 Cookies,得知你的相关信息,就可以做出相应的动作,如在页面显示欢迎你的标语,或者让你不用输入 ID、密码就直接登录等等。从本质上讲,它可以看作是你的身份证。

使用传统的 Javascript 来设置和获取 Cookies 信息很麻烦,要写上几个函数来处理,幸运的是 jQuery 帮我们做了很多事,借助 jQuery.cookie.js 插件,我们可以轻松的创建、获取和删除 Cookies。

参数说明

首先简要介绍下 jQuery.cookie.js 操作 cookie 的相关参数。

创建 Cookie

使用 jQuery 设置 cookie 非常简单。如,我们创建一个名为“lxtx_example”,值为“lxt”的 cookie:

要设置 cookie 的有效期,可以设置 expires 值,如设置 cookie 的过期时间为 10 天:

设置 cookie 一小时后过期:

要设置 cookie 的保存路径,可以设置 path 值,如设置路径为网站根目录,这代表网站所有网页都能互相读取 cookie:

如果要设置路径为/admin,则代表仅 admin 目录下的页面能相互读取 cookie:

获取 Cookie 值

使用 jQuery 获取 cookie 的值的方法那是相当的简单,下面是显示名为“lxtx_example”的 cookie 的值:

删除 Cookie

使用 jQuery 删除 cookie,成功删除 cookie 会返回 true,否则返回 false:

实例应用

了解了 cookie 相关设置操作方法后,接下来龙笑天下就用实例来演示 cookies 的应用,相信细心的盆友也发现了,每天首次打开本站时右下角会弹出一个小提示弹出框:


首先,引入 jQuery 及 jQuery.Cookie.js。对于 wordpress 来说,一般主题都已经引入了jquery,因此只需要引入 jquery.cookie.js:

注:jQuery 文件引入要在插件 jquery.cookie 前,因为 jquery.cookie 插件依赖 jquery 类库!

然后,在网页 body 的闭合标签</body;前加入如下 html:

最后,引入 css:

到这里就搞定啦!感兴趣的同学可以去试试效果,所谓实践出真知,只看不实践可是记不住的呢,就是说,看了也白看的意思,当然,前提是你对这玩意得感兴趣。

本文地址:https://www.tctck.com/post/68.html
版权声明:本文为原创文章,版权归 代笔写书 所有,欢迎分享本文,转载请保留出处!
广告位出售
广告位出售

发表评论


表情

还没有留言,还不快点抢沙发?