Cookie实战项目2 记住用户名密码 使用jQuery.Cookie.js 就是这么简单！！！

记住用户名密码 使用jQuery.Cookie.js 就是这么简单！！！

本次实战巩固jQuery.Cookie.js的使用。你会发现咋这么简单呢！！！！

先看效果图

打开页面

填写数据，勾上记住密码

刷新页面（奇迹出现了吧！！！！）

源代码

1.引入js文件

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

注：导入顺序，不要搞错了。。。

2.编写HTML

<div class="row">
    <h3>记住用户名密码</h3>
    <input type = "text" class="form-control" id="userName" placeholder = "用户名"> <br>
    <input type="password" class="form-control" id="password" placeholder = "密码"> <br>
    <input type="checkbox"id="checkbox">记住密码 <br><br>
    <input type="button" class="btn btn-success" value = "提交" id = "save">    
</div>

3.编写JS语言

<script type="text/javascript">
$(function(){
    if($.cookie("username")!=null&&$.cookie("password")!=null){
        $("#userName").val($.cookie("username"));
        $("#password").val($.cookie("password"));
    }
     $("#save").click(function(){
         if($("#checkbox").prop("checked")) {
            // 写入cookie
             $.cookie("username", $("#userName").val(), {
                    path: "/", expires: 7
                });
            $.cookie("password", $("#password").val(), {
                path: "/", expires: 7
            });
         }

    });

});
</script>

注：验证checkbox是否被选中用$(“#checkbox”).prop(“checked”)，不然，只能呵呵呵呵了。。。。。

总结

在学习中越来越感觉到基础的重要性了，有很多技术细节都是要懂不懂或者的懂的不多。为了改善这种情况，打算以后会对知识的细节从点到面的去理解，然后再写博客加深印象，也能分享给更多有需要的朋友。