原理是在提交表單的時(shí)候把用戶名和密碼的值存入cookie中然后再次進(jìn)入頁面時(shí)讀取cookie

html部分

<div class="log_form">
                <div class="log_form_biao">蚊子蚊子蚊子</div>
                <div  class="log_form_inp">
                    <div>
                        <i-input type="text" v-model="username" placeholder="請(qǐng)輸入用戶名" id="user">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </i-input>
                    </div>
                    <div>
                        <i-input type="text" v-model="password" placeholder="請(qǐng)輸入密碼" id="pswd">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </i-input>
                    </div>
                    <div>
                        <Checkbox v-model="password_ji" class="password_ji">記住密碼</Checkbox>
                        <a href="./password_recovery.html" class="password_wji">忘記密碼？</a>
                    </div>
                </div>
                <div>
                    <i-button type="warning" @click="registration">注冊(cè)新機(jī)構(gòu)</i-button>
                    <i-button type="success" class="login_bt" @click="login_submit">登錄</i-button>
                </div>

            </div>

js部分

mounted(){
      this.getCookie();

  },

然后在methods中寫如下函數(shù)

//設(shè)置cookie
    setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date();
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天數(shù)
        document.cookie = "userName=" + c_name + ";path=/;expires=" + exdate.toLocaleString()
        document.cookie = "userPwd=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString()
    },
    //獲取cookie
    getCookie: function() {
        if (document.cookie.length > 0) {
            var arr = document.cookie.split('; '); //這里顯示的格式需要切割一下自己可輸出看下
            // console.log(arr)
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('='); //再次切割
                //判斷查找相對(duì)應(yīng)的值
                if (arr2[0] == 'userName') {
                    this.username = arr2[1]; //保存到保存數(shù)據(jù)的地方
                } else if (arr2[0] == 'userPwd') {
                    this.password = arr2[1];
                }
            }
        }
    },
    //刪除cookie
    clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都為空凹蜂，天數(shù)為負(fù)1天就好了

    },

login_submit(){
        //判斷復(fù)選框是否被勾選 勾選則調(diào)用配置cookie方法
        if (this.password_ji == true) {
            console.log("checked == true");
            //傳入賬號(hào)名妻率，密碼奄侠，和保存天數(shù)3個(gè)參數(shù)
            this.setCookie(this.username, this.password, 7);
        }else {
          console.log("清空Cookie");
          //清空Cookie
          this.clearCookie();
        }
        
        //與后端請(qǐng)求代碼绽昼，本功能不需要與后臺(tái)交互所以省略
        
        console.log("登陸成功");
        

    },

備注：測(cè)試的時(shí)候如果是本地測(cè)試不要用chome瀏覽器，否則讀取不了cookie因?yàn)閔ttponly屬性的原因

原文：(https://blog.csdn.net/wangle_style/article/details/80482966 )