js 如何實現登入時記住密碼

一般的網頁版網站登入的時候都會有記住密碼的功能，需求是勾選記住密碼，下次登入會自動帶出來使用者名稱和密碼。

直接上程式碼

JS 程式碼如下：

 window.onload = function(){
        var oForm = document.getElementById('signupForm');
        var oUser = document.getElementById('username');
        var oPswd = document.getElementById('password');
        var oRemember = document.getElementById('rememberme');
        //頁面初始化時，如果帳號密碼cookie存在則填充
        if (getCookie('username') && getCookie('password')) {
            oUser.value = getCookie('username');
            oPswd.value = getCookie('password');
            oRemember.checked = true;
        }
        //複選框勾選狀態發生改變時，如果未勾選則清除cookie
        oRemember.onchange = function() {
            if (!this.checked) {
                delCookie('username');
                delCookie('password');
            }
        };
        //表單提交事件觸發時，如果複選框是勾選狀態則儲存cookie
        oForm.onsubmit = function() {
            if (oRemember.checked) {
                setCookie('username', oUser.value, 7); //儲存帳號到cookie，有效期7天
                setCookie('password', oPswd.value, 7); //儲存密碼到cookie，有效期7天
            }
        };
    };
    //設定cookie
    function setCookie(name, value, day) {
        var date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = name + '=' + value + ';expires=' + date;
    };
    //獲取cookie
    function getCookie(name) {
        var reg = RegExp(name + '=([^;]+)');
        var arr = document.cookie.match(reg);
        if (arr) {
            return arr[1];
        } else {
            return '';
        }
    };
    //刪除cookie
    function delCookie(name) {
        setCookie(name, null, -1);
    };
 

HTML 程式碼如下：

<form id="signupForm" autocomplete="off">
    <h2 class="no-margins text-center">無人機巡檢系統</h2>
    <input type="text" id="username"    name="username" class="form-control uname"     placeholder="使用者名稱" />
    <input type="password" id="password" name="password" class="form-control pword"     placeholder="密碼"  />
    <div class="row m-t" th:if="${captchaEnabled==true}">
        <div class="col-xs-6">
            <input type="text" name="validateCode" class="form-control code" placeholder="驗證碼" maxlength="5" />
        </div>
        <div class="col-xs-6">
            <a href="javascript:void(0);" title="點選更換驗證碼">
                <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
            </a>
        </div>
    </div>
    <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">記住我</label>
    </div>
    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在驗證登入，請稍後...">登入</button>
</form>
 

cookie 效果如下：