說明

前端設計

引用檔案

<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！記住我功能實現了！