说明
- 使用此功能我是在有服务器环境下操作的
- 记住我功能设计,需要jquery.cookie.js文件 下载链接
http://pan.baidu.com/s/1o7AVWyI 密码:sfce - cookie相关知识http://www.cnblogs.com/aspnet_csharp/archive/2012/10/18/2729609.html
前端设计
引用文件
<script src="js/jquery.cookie.js"></script>
jsp页面一加载就执行判断cookie中是否存入信息并填入表单
<!-- 一加载就执行 用于记住我功能 -->
<script>
$(document).ready(function(){
if($.cookie("password") != ''){
$("#password").val($.cookie("password"));
}
if($.cookie("name") != ''){
$("#name").val($.cookie("name"));
}
})
</script>
form表单 在提交表单之前把输入的信息存入cookie
<form action="login.action" method="post" onsubmit="return check()">
<div class="login form">
<div class="group">
<div class="group-ipt email">
<input type="text" name="name" id="name" class="ipt" placeholder="登录账号" required>
</div>
<div class="group-ipt password">
<input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required>
</div>
</div>
</div>
<div class="button">
<input type="submit" class="login-btn register-btn" id="button" value="登录">
</div>
<div class="remember clearfix">
<label class="remember-me"><span class="icon"><span class="zt"></span></span><input type="checkbox" name="remember-me" id="remember-me" class="remember-mecheck" checked>记住我</label>
<label class="forgot-password">
<a href="#">忘记密码?</a><!-- -->
</label>
</div>
</form>
check()函数
<script>
function check(){
//记住我功能使用
//写入cookie
if ($("#remember-me").prop("checked") == true) {
var name = $("#name").val();
var password = $("#password").val();
//alert(passWord);
$.cookie("name", name);
$.cookie("password", password,{ expires: 7 }); // 存储一个带7天期限的 cookie 如果{ expires: 7 } 不写则cookie只相当回话效果
} else {
$.cookie("name", "");
$.cookie("password", "");
}
}
</script>
OK!记住我功能实现了!