jquery.cookie.js插件的使用以及注意事项

 jQuery/js   高蒙   阅读(475)    jquery  jquery插件  jquery.cookie.js   2016-12-22 13:21:14 


jquery.cookie.js插件是客户端的jquery-cookie插件,可以很方便的设置cookie缓存。设置简单,操作方便。

一、注意事项:

自己在动手操作的时候还是遇到一点问题,比如出现cookie设置不成功获取失败,请注意下面的细节。

1、在设置cookie的时候,要设置好path和domain。避免在获取的时候,出现失败。

2、在删除cookie的时候,也要带上path和domain。同时在赋值的时候,可以用空字符串代替null去删除cookie。因为在获取的时候,它会是null,这个我觉得不友好。

二、案例分析:

有了上面的注意细节,那么我们自己亲自的操作一个,这里准备了一个小案例?

案例描述:点击单选按钮,切换文本的颜色。

案例需求:当存在设置的cookie值的时候,默认显示cookie设置。否则显示默认的色彩。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery-cookies.js</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <style>
        .default{color: #000000}
        .red{color: #ff0000}
        .green{color: #00aa00}
        .grey{color: #999999}
    </style>
</head>
<body>
<input type="radio" name="color"><b>默认色</b>
<input type="radio" name="color"><b>红色</b>
<input type="radio" name="color"><b>绿色</b>
<input type="radio" name="color"><b>灰色</b>
<hr/>
<div>我是啥颜色</div>
<button>删除色彩</button>
<script>
    $(function(){
        // 获取是否有默认的颜色 不存在cookie则设置默认色彩
        var $color = $.cookie('color');
        if($color){
            $('.font').addClass($color);
            $('.'+$color).prop('checked',true).end().siblings('input').prop('checked',false);
        }else{
            $('.font').addClass('default');
            $('.default').prop('checked',true);
        }
        // 点击设置颜色 切记先删除所有的颜色样式 再添加样式 因为class是集合
        $('input[name=color]').on('click',function(){
            $color = $(this).attr('class');
            $.cookie('color',$color,{path:'/',domain:'a.com',expires:1});
            $(this).prop('checked',true).end().siblings('input').prop('checked',false);
            $('.font').removeClass('default red green grey').addClass($color);
        });
        // 删除cookie
        // 注意在删除cookie的时候 可以用空字符串代替null的设置 方便在开始的部分判断
        $('.delcolor').on('click',function(){
            $.cookie('color','',{path:'/',domain:'a.com'});
            $('.font').removeClass('default red green grey').addClass('default');
            $('.default').prop('checked',true);
        });
    });
</script>
</body>
</html>

效果图:

1111.jpg

三、拓展。

通过上面简单的案例,我们基本掌握了jquery.cookie.js插件的使用以及注意事项,那么下面我们看看jquery.cookie.js插件的设置参数有哪些?

$.cookie('color',$color,[{下面参数}]);
expires: (Number | Date)有效期,可以设置一个整数作为有效期(单位:天),也可以设置一个日期对象作为Cookie的过期日期。如果指定日期为负数,那么此cookie将被删除;如果不设置或者设置为null,那么此cookie将被当作Session Cookie处理,并且在浏览器关闭后删除
path:  (String)Cookie的路径属性,默认是创建该cookie的页面路径
domain: (String)Cookie的域名属性,默认是创建该cookie的页面域名
secure: (Boolean)如果设为true,那么此cookie的传输会要求一个安全协议,例如HTTPS


相关文章



最新评论


我要评论



回复:

Copyrights © 2016-2017 高蒙个人博客 www.shuchengxian.com, All rights reserved. 皖ICP备15015490号 皖公网安备 34152302000022号网站地图

关键词:jquery,jquery插件,jquery.cookie.js