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

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

利用Jquery Cookie为网站增加一个带有效期的弹出提示框-第1张-boke112百科(boke112.com)

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

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

参数说明

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

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

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

设置 cookie 一小时后过期：

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

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

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

3、删除 Cookie。使用 jQuery 删除 cookie，成功删除 cookie 会返回 true，否则返回 false：

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

利用Jquery Cookie为网站增加一个带有效期的弹出提示框-第2张-boke112百科(boke112.com)

1、引入 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>

2、在网页 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>

3、引入 css：

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