LXTX
龙笑天龙笑天  3个月前 (11-03) 来源:龙笑天下 隐藏边栏 |   38 条评论  881 
文章评分 37 次,平均分 4.9

利用Jquery Cookie为网站增加一个带有效期的弹出提示框 其它

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

当你再次来到该网站时,网站通过读取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 Cookie为网站增加一个带有效期的弹出提示框 其它

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

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

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

最后,引入css:

至此,一个完整的实例完成了,更多应用就请大家自行去发挥吧~

相关参考

Jquery.cookie.js的Github官网
使用Javascript控制Cookie关闭大背景

 

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:14    粉丝:6
互助分享,互联网本该如此!
×

感谢您对龙笑天的支持,么么哒~

支付宝打赏 龙笑天
请扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

龙笑天下 - 分享悲伤;共享快乐

发表评论

表情 贴图 链接 私密 格式 签到

最赞评论
  1. 狂放
    狂放 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省温州市 电信

    这个厉害,写成插件爽歪歪 [呲牙] ,还有登录才有头像?(大佬怕X级?#手动滑稽)

  2. 橘子书
    橘子书 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 Windows 7 福建省漳州市 电信

    bd这是一张携带病毒的图片,请注意查收。 [坏笑] [憨笑]

  3. 小萝博客
    小萝博客 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 Windows 10 江西省赣州市 电信

    特想知道登陆是啥样精彩

  1. 西枫里博客
    西枫里博客 评论达人 LV.2 来自天朝的朋友 搜狗浏览器 Windows 7 上海市 联通

    我用来控制验证码倒计时了。哈哈哈

    17楼 8天前
    0 0 回复
  2. D
    devoted 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 Windows 10 河北省石家庄市 联通

    怎么我每次进来都感觉好久没更博的样子。。。。。。新年快乐哦

    16楼 2018-01-01 00:55
    0 0 回复
  3. 鳄鱼皮钱包
    鳄鱼皮钱包 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市白云区 电信

    浏览了,这篇还是要实际操作

    15楼 2017-12-29 14:53
    0 0 回复
  4. 云落
    云落 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省常州市 联通

    想想。。。又要增加一个请求。。。。。算了

    14楼 2017-11-13 14:16
    0 0 回复
  5. 云落
    云落 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省常州市 联通

    很不错的,打算用上,另外贴图和我论坛用的一样,但是处理的比较好

    13楼 2017-11-13 14:12
    0 0 回复
  6. 99八十一
    99八十一 来自天朝的朋友 谷歌浏览器 Windows Server 2003 四川省成都市 电信

    看到实例了,不错哦,注册用户多的博客比较实用。

    12楼 2017-11-10 23:31
    0 0 回复
  7. 小斌博客
    小斌博客 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 联通

    好文章,顶一个!

    11楼 2017-11-09 23:47
    0 0 回复
  8. 橘子书
    橘子书 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 Windows 7 福建省漳州市 电信

    bd这是一张携带病毒的图片,请注意查收。 [坏笑] [憨笑]

    10楼 2017-11-08 15:24
    3 0 回复
  9. mengkun
    mengkun 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省温州市 电信

    原来你研究图床功能是为了给评论加上快捷上传图片 [坏笑] 这个想法不错!抽空我也加上 [鼓掌]

    9楼 2017-11-08 09:44
    0 0 回复
    • 龙笑天
      龙笑天 年费会员 博 主 来自天朝的朋友 火狐浏览器 Windows 7

      @mengkun欢迎dalao~ 更高级的功能不会弄啊 [可怜] 目前这个用的别人的api,希望能持久,不会自己制作API木有办法 [可怜]

  10. 龙笑天
    龙笑天 年费会员 博 主 来自天朝的朋友 火狐浏览器 Windows 7

    测试插图:
    韩雪 20171107
    成功~ [鼓掌]

    8楼 2017-11-07 18:54
    0 0 回复
  11. 懿古今
    懿古今 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信

    这个功能不错,特别是有些特别事情需要通知的时候,很实用

    7楼 2017-11-06 10:42
    0 0 回复
  12. 喵喵喵
    喵喵喵 来自天朝的朋友 谷歌浏览器 Windows 10 山东省泰安市泰山区 联通

    好奇的注册了一个账号,结果。。。1

    6楼 2017-11-04 18:29
    0 0 回复
  13. 阿龙啊
    阿龙啊 来自天朝的朋友 QQ浏览器  Android 7.1.1 vivo X9 Build/NMF26F 福建省泉州市 联通

    求本站必应每日壁纸的源码

    5楼 2017-11-03 22:18
    0 0 回复
  14. 小萝博客
    小萝博客 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 Windows 10 江西省赣州市 电信

    特想知道登陆是啥样精彩

    4楼 2017-11-03 19:58
    2 0 回复
  15. 狂放
    狂放 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省温州市 电信

    这个厉害,写成插件爽歪歪 [呲牙] ,还有登录才有头像?(大佬怕X级?#手动滑稽)

    地板 2017-11-03 11:17
    6 0 回复
  16. 万正远洋
    万正远洋 来自天朝的朋友 火狐浏览器 Windows 7 河南省南阳市 联通

    赞一个,有机会用到公司的网站上去!

    板凳 2017-11-03 10:45
    2 1 回复
  17. 明月登楼
    明月登楼 评论达人 LV.3 来自天朝的朋友 火狐浏览器 Windows 7 河南省南阳市 联通

    不错,这个要顶一下!

    沙发 2017-11-03 10:44
    0 0 回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

您也可以使用第三方帐号快捷注册

扫一扫二维码分享
Tips:
网站已开启关注与粉丝功能,求哦~