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

投稿   龙笑天下  2017-11-10 07:26:54  113 人阅读  26 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

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

利用Jquery Cookie为网站增加一个带有效期的弹出提示框 海纳百川 第1张

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

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

参数说明

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

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

  1. $.cookie("lxtx_example""lxt");

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

  1. $.cookie("lxtx_example""lxt",{expires:10});

设置cookie一小时后过期:

  1. var cookietime = new Date();
  2. cookietime.setTime(date.getTime() + (60 * 60 * 1000));//coockie保存一小时 
  3. $.cookie("lxtx_example""lxt",{expires:cookietime});

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

  1. $.cookie("lxtx_example""lxt",{path:"/"});

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

  1. $.cookie("lxtx_example""lxt",{path:"/admin"});

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

  1. $.cookie("lxtx_example");

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

  1. $.removeCookie('lxtx_example');

实例应用

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

利用Jquery Cookie为网站增加一个带有效期的弹出提示框 海纳百川 第2张

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

注:jQuery 文件引入要在插件 jquery.cookie 前,因为 jquery.cookie插件依赖 jquery  类库!
  1. <!--script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script-->
  2. <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  3. <script type="text/javascript">
  4. $(function() {
  5.     if($.cookie("lxtx_sitetips_cookie")!='1'){
  6.         $('.site-tips').show();
  7.     }
  8. });
  9. $('.site-tips .close').on('click',function(){
  10.     $('.site-tips').hide();
  11.     $(function() {
  12.         $.cookie('lxtx_sitetips_cookie', '1', { expires: 1 });
  13.     });
  14. });
  15. </script>

2、在网页 body 的闭合标签 </body> 前加入如下 html:

  1. <div class="site-tips">
  2.     <a href="javascript:;" class="close"><i class="fa fa-close"></i></a>
  3.     <span style="color: #F98181;">Tips:</span><br />本周内所有访客的头像全改为首字符(包括汉字和字母),登录以后更精彩哦~。
  4. </div>

3、引入 css:

  1. .site-notice,.site-tips {
  2.     positionfixed;
  3.     z-index: 999;
  4.     displaynone;
  5.     bottom: 0;
  6.     right: 0;
  7.     width250px;
  8.     heightauto;
  9.     background#fff;
  10.     color#999;
  11.     border-radius: 3px 0 0 0;
  12.     padding25px;
  13.     box-shadow: 0 0 12px rgba(0,0,0,.1)
  14. }
  15. .site-notice .close,.site-tips .close {
  16.     positionabsolute;
  17.     right: 0;
  18.     top: -20px;
  19.     background#fff;
  20.     opacity: 1;
  21.     color#999;
  22.     width25px;
  23.     height25px;
  24.     text-aligncenter;
  25.     border-radius: 3px 0 0 0
  26. }

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

参考资料

如果文章对你有帮助,请赞赏支持作者继续创作!

历史上的今天:

文章标签: ,   ,  
原文地址:http://www.ilxtx.com/jquery-cookie-js.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙笑天下 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

 发表评论


  1. 丛中笑
    丛中笑 【小白】 @回复

    写的专业啊!学习一下。很想在boke112上投稿一篇,不知道如何申请的详节。

    • 懿古今
      懿古今【村长】2017-11-13 08:47  回复

      @丛中笑[吃惊] 本站侧边栏都有征稿启事的图片广告,点击进去就可以看到想要的收稿要求

  2. 沈唁志
    沈唁志 【秀才】 @回复

    学习了 很不错

  3. 星岩博客
    星岩博客 【秀才】 @回复

    博客弄了个读者墙,发现boke112是金牌读者,翻了翻曾经的博客,发现好多博客都已阵亡了。不得不感叹,兴趣是唯一动力。时间久了,过来看看老朋友。

    • 懿古今
      懿古今【村长】2017-11-12 17:21  回复

      @星岩博客现在网站一般超过半年的都很了不起,大部分都是在3个月左右就挂了,所以我们能够坚持下来都不容易啊

  4. BanYuner
    BanYuner 【进士】 @回复

    利用cookie给用户提示是不错的选择,避免了多次提示

  5. 雅兮网
    雅兮网 【尚书】 @回复

    这个非常的赞,关于cookies这块 很少应用,可以从这个开始切入学习

  6. 99八十一
    99八十一 【进士】 @回复

    折腾下,体验应该不错,个人站估计不实用。

  7. 丛中笑
    丛中笑 【小白】 @回复

    太专业业了啊!👍

  8. 跨境电商培训
    跨境电商培训 【书童】 @回复

    非常不错!!!!

  9. 土鳖哥
    土鳖哥 【秀才】 @回复

    好像这个很实用,很有用

  10. 我爱动感单车网
    我爱动感单车网 【尚书】 @回复

    真心弄不来这些技术活。

  11. 万正远洋
    万正远洋 【小白】 @回复

    这个会不会引起用户的反感呢?

  12. 搭配博主
    搭配博主 【秀才】 @回复

    已配置,感谢分享!

  13. 橘子书
    橘子书 【丞相】 @回复

    部署步骤略多,萌新渴望DALAO能够再发个更简单的方法!

  14. 趣果网
    趣果网 【秀才】 @回复

    一个不懂技术的站长,来学习学习。

  15. 龙笑天
    龙笑天 【状元】 @回复

    妈蛋的,这个貌似在我火狐上有点小问题…

    • 明月登楼
      明月登楼 【王爷】2017-11-10 15:11  回复

      @龙笑天各个浏览器对JS的支持好像都不统一的,所以我现在一般都折腾JS方面的代码! [吃惊]

  16. 前沿网
    前沿网 【书童】 @回复

    博主很勤奋啊,7点多就开发发文了!

  17. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    这个好像我有用过。

  18. 辩论吧
    辩论吧 【尚书】 @回复

    研究的够细啊

  19. 明月登楼
    明月登楼 【王爷】 @回复

    在龙龙的站里看到过!还没有仔细研究!

  20. 小苍老师
    小苍老师 【状元】 @回复

    学习了,晚上试试看!