登錄界面記住密碼功能的實現

大體思路就是通過存/取/刪cookie實現的；每次進入登錄頁，先去讀取cookie，如果瀏覽器的cookie中有賬號信息，就自動填充到登錄框中，存cookie是在登錄成功之后，判斷當前用戶是否勾選了記住密碼，如果勾選了，則把賬號信息存到cookie當中，效果圖如下：

瀏覽器中的cookie信息如下圖，注意這里的cookie的expire/Max-Age過期時間，這個時間是格林尼治標准時間GMT，世界統一的時間，GMT+8小時就是北京時間，初中地理沒學好，特地去查了下！！

實現代碼：

html

<template>  
    <div class="login-wrapper">  
        <form class="form-signin" role="form">  
            <h2 class="form-signin-heading">點播系統</h2>  
            <input class="form-control" v-model="userName" v-on:keydown="doLogin($event)" placeholder="用戶名" required autofocus>  
            <input type="password" class="form-control" v-model="passWord" v-on:keydown="doLogin($event)" placeholder="Password">  
            <div class="checkbox remember-password-container">  
                <input type="checkbox" value="remember-me" v-model="rememberPassword" id="remember-password-checkbox" v-on:click="doRememberPassword($event)">  
                <label for="remember-password-checkbox">  
                    Remember me  
                </label>  
            </div>  
            <div class="btn btn-lg btn-primary btn-block" v-on:click="doLogin()">Sign in</div>  
        </form>  
    </div>  
</template>

登錄處理邏輯js

export default {  
    // name: 'component2',  
    data () {  
        return {  
            userName: "",  
            passWord: "",  
            rememberPassword: false  
        }  
    },  
    // 相當於init doAjax  
    beforeCreate() {  
        // console.log('login頁面 加載完成！')  
    },  
    // 相當於ready 模板編譯掛載之后  
    mounted: function() {  
        //讀取cookie中的賬號信息，如果有accountInfo的話，則說明該用戶之前勾選了記住密碼的功能，則需要自動填上賬號密碼  
        this.loadAccountInfo();  
    },  
    methods: {  
        doLogin: function(event){  
  
            var mySelf = this;  
            const router = this.$router;  
            // console.log(router)  
            // router.go();  
            // router.push({path:'/index'})  
            // console.log(pars.domain)  
  
            var mySelf = this;  
            var userName = mySelf.userName;  
            var userPwd = mySelf.passWord;  
            //記住密碼checkbox的勾選狀態 和賬號信息的字符串  
            var rememberStatus = mySelf.rememberPassword;  
            var accountInfo = "";  
            accountInfo = userName + "&" + userPwd;  
  
            if (event && event.type == 'keydown' && event.keyCode != 13) {  
                return;  
            }  
  
            //console.log("用戶名：" + userName)  
            //console.log("密碼：" + userPwd)  
  
            if (userName == ""){  
                util.showDialog('error','用戶名不能為空！');  
                return;  
            }  
            if (userPwd == ""){  
                util.showDialog('error','密碼不能為空！');  
                return;  
            }  
  
            $.get( pars.domain + "xxx" + "&t=" + (new Date).getTime(), function(ret) {  
  
                if (ret.code == 0) {  
                    //如果登錄成功，則把賬號信息保存在cookie當中  
                    if (rememberStatus){  
                        console.log("勾選了記住密碼，現在開始寫入cookie");  
                        util.setCookie('accountInfo',accountInfo,1440*3);  
                    }  
                    else{  
                        console.log("沒有勾選記住密碼，現在開始刪除賬號cookie");  
                        util.delCookie('accountInfo');  
                    }  
  
                    // 若為本地環境 則手寫cookie  
                    if (window.location.href.indexOf('localhost') != -1){  
                        util.setCookie('token','zhaopeng_58e0cbbea951f0e79fafcee80da522b8',1440);  
                    }  
                    // console.log(window.location.href)  
                    console.log('登錄的返回值為0');  
                    router.push({path:'/'});  
                } else {  
                    util.showDialog('error','賬號名或密碼錯誤!');  
                }  
            }, "json");  
  
        },  
        doRememberPassword: function(event){  
            let mySelf = this;  
            let rememberStatus = mySelf.rememberPassword;  
            // event.preventDefault();  
            mySelf.rememberPassword = !rememberStatus;  
            //如果去掉勾選，則刪掉cookie  
            // if (!rememberStatus){  
  
            // }  
            // mySelf.rememberPassword = false;  
        },  
        loadAccountInfo: function(){  
  
            let mySelf = this;  
            //zhaopeng&A15hOsu8YeGnCsjb  
            let accountInfo = util.getCookie('accountInfo');  
  
            //如果cookie里沒有賬號信息  
            if(Boolean(accountInfo) == false){  
                console.log('cookie中沒有檢測到賬號信息！');  
                return false;  
            }  
            else{  
            //如果cookie里有賬號信息  
                console.log('cookie中檢測到賬號信息！現在開始預填寫！');  
                let userName = "";  
                let passWord = "";  
                let index = accountInfo.indexOf("&");  
  
                userName = accountInfo.substring(0,index);  
                passWord = accountInfo.substring(index+1);  
  
                mySelf.userName = userName;  
                mySelf.passWord = passWord;  
                mySelf.rememberPassword = true;  
            }  
        }  
  
    }  
}  

操作cookie邏輯js

// 設置cookie  
setCookie: function(c_name,value,expiremMinutes){  
    var exdate = new Date();  
    exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);  
    document.cookie= c_name + "=" + escape(value)+((expiremMinutes==null) ? "" : ";expires="+exdate.toGMTString());  
},  
  
// 讀取cookie  
getCookie: function(c_name){  
    if (document.cookie.length>0)  
    {  
        var c_start=document.cookie.indexOf(c_name + "=");  
        if (c_start!=-1)  
        {   
        c_start=c_start + c_name.length+1;  
        var c_end=document.cookie.indexOf(";",c_start);  
        if (c_end==-1)   
            c_end = document.cookie.length  
            return unescape(document.cookie.substring(c_start, c_end))  
        }  
    }  
    return ""     
},  
  
// 刪除cookie  
delCookie: function(c_name){  
    var exp = new Date();  
    exp.setTime(exp.getTime() - 1);  
    var cval = this.getCookie(c_name);  
    if(cval!=null){  
        document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();  
    }  
},