[置顶] JavaWeb JQuery实现记住我功能

一般记住我,都要求密码可以进行加密处理,如果有一个插件来实现自然不用再麻烦,所以百度了一下,有如下方法,步骤如下:

1. 有一个插件:需要使用jquery的jquery.cookie.js插件，下载地址https://github.com/carhartl/jquery-cookie,官网上github,我没有找到下载的按钮,就将这个jquery.cookie.js,复制了一遍,放在工程目录下,如下官网截图:

2. 将这个js文件放在你的webRoot放置JQuery基本库的路径下即可,然后在页面上引入这个js文件:

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>       <!--   引入引用jquery的库文件 -->
<script src="js/jquery.cookie.js" type="text/javascript"></script>    <!--   引入jQuery的cookie插件 -->

3.给用户名和密码/记住我,添加id,以便于能从cookie中拿到保存的值,进行重新赋值的操作,这里只是对网站安全性能要求比较低的实现的记住密码功能,如果是商用的,可以有更复杂的方案,参考这个链接: 你会做web上的用户登录功能吗:

<!-- BEGIN LOGIN FORM -->
<form class="form-vertical login-form" id="login_form">
<h3 class="form-title">登录</h3>
<div class="alert alert-error hide">
<button class="close" data-dismiss="alert"></button>
<span>请输入用户名和密码。</span>
</div>
<div class="control-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">用户名</label>
<div class="controls">
<div class="input-icon left">
<i class="icon-user"></i> <input class="m-wrap placeholder-no-fix"
type="text" placeholder="用户名" name="username" id="wsc-username"
style="width:290px; height:34px" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label visible-ie8 visible-ie9">密码</label>
<div class="controls">
<div class="input-icon left">
<i class="icon-lock"></i> <input class="m-wrap placeholder-no-fix"
type="password" placeholder="密码" name="password"
id="wsc-password" style="width:290px; height:34px" />
</div>
</div>
</div>
<div class="form-actions">
<label class="checkbox"> <input type="checkbox" id="rmbUser"
name="remember" value="1" /> 记住我
</label>
<button type="submit" class="btn blue pull-right"
onclick="saveUserInfo()">
登录 <i class="m-icon-swapright m-icon-white"></i>
</button>
</div>
<div class="create-account">
<div class="copyright">2016 &copy; RMS.</div>
</div>
</form>
<!-- END LOGIN FORM -->

</div>
<!-- END LOGIN -->

<script src="media/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="media/js/jquery.blockui.min.js" type="text/javascript"></script>

<script src="media/js/jquery.cookie.js" type="text/javascript"></script>
<!-- 实现记住我功能插件js,qiulinhe:2016年10月9日10:47:29 -->
<script src="media/js/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->

<script>
jQuery(document).ready(function() {
if ($.cookie("rmbUser") == "true") {
$("#rmbUser").attr("checked", "checked");
$("#wsc-username").val($.cookie("userName"));
$("#wsc-password").val($.cookie("passWord"));
}

App.init();
Login.init();

});

function saveUserInfo() {
if ($("#rmbUser").attr("checked") == "checked") {
var userName = $("#wsc-username").val();
var passWord = $("#wsc-password").val();
$.cookie("rmbUser", "true", {
expires : 7
}); // 存储一个带7天期限的 cookie
$.cookie("userName", userName, {
expires : 7
}); // 存储一个带7天期限的 cookie
$.cookie("passWord", passWord, {
expires : 7
}); // 存储一个带7天期限的 cookie
} else {
$.cookie("rmbUser", "false", {
expires : -1
}); // 删除 cookie
$.cookie("userName", '', {
expires : -1
});
$.cookie("passWord", '', {
expires : -1
});
}
}
</script>

以上三个步骤即可利用插件实现记住我的功能,网上的很多例子有一个bug就是通过JQuery判断是否已经选中的这句$("#rmbUser").attr("checked") == "true",经过测试,即便是勾选了,也不会进入这个判断语句中,需要改成:$("#rmbUser").attr("checked") == "checked",如下是解释:

参考链接:http://blog.csdn.net/limingchuan123456789/article/details/11499665

jquery判断checked的三种方法:
.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

更多相关文章

随机推荐