龙笑天龙笑天  1个月前 (11-03) 来源:龙笑天下 隐藏边栏 |   30 条评论  657 
文章评分 30 次,平均分 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关闭大背景

 

除特别注明外,本站所有文章均为龙笑天下原创,转载请注明出处来自:https://www.ilxtx.com/jquery-cookie-js.html

龙笑天
龙笑天
互助分享,互联网本该如此!
×

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

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

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

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

发表评论

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

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

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

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

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

    特想知道登陆是啥样精彩

  1. 云落 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省常州市 联通

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

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

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

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

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

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

    好文章,顶一个!

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

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

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

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

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

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

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

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

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

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

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

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

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

    特想知道登陆是啥样精彩

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

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

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

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

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

    不错,这个要顶一下!

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

登录

忘记密码 ?

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

切换登录

注册

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

扫一扫二维码分享
Tips:
网站已重新备案成功并开启HTTPS,欢迎各位dalao来访~
感谢网警大哥鼎力相助~