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

2017-11-03 10:39 2,326 38 条评论 龙笑天下

利用 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("lxtx_example", "lxt");

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

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

设置 cookie 一小时后过期:

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

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

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

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

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

获取 cookie 值

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

$.cookie("lxtx_example");

删除 Cookie

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

$.removeCookie('lxtx_example');

实例应用

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

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

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

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

<!--script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script-->
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function() {
    if($.cookie("lxtx_sitetips_cookie")!='1'){
        $('.site-tips').show();
    }
});
$('.site-tips .close').on('click',function(){
    $('.site-tips').hide();
    $(function() {
        $.cookie('lxtx_sitetips_cookie', '1', { expires: 1 });
    });
});
</script>

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

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

最后,引入 css:

/* lxtx-tips */
.site-tips,.site-notice{position: fixed;z-index:999;display:none;bottom:0;right:0;width:250px;height:auto;background: #fff; color:#999;border-radius: 3px 0 0 0;padding:25px;box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);}
.site-tips .close,.site-notice .close{position: absolute;right: 0;top: -20px;background: #fff;opacity: 1;color: #999;width: 25px;height: 25px;text-align: center;border-radius: 3px 0 0 0;}

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

相关参考

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

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

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

2017-05-25

2018-11-27

发表评论

表情 格式 贴图 链接 私密 签到
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more