登录记住我功能实现

说明

1. 使用此功能我是在有服务器环境下操作的
2. 记住我功能设计，需要jquery.cookie.js文件 下载链接
   http://pan.baidu.com/s/1o7AVWyI 密码：sfce
3. 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！记住我功能实现了！