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”)，不然，只能呵呵呵呵了。。。。。

总结

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