vue 登陸記住用戶名密碼

<div class="wrap">
  <van-checkbox @click="state = !state" v-model="state" checked-color="#c2993f" icon-size='1.1rem'>記住密碼</van-checkbox>
</div>

<script>
export default{

    data(){
        return{
            userName:'',
            password:'',
            state:false
        }
    },

    created(){
        this.getCookie();
    },

    methods:{
       //點擊登陸調用設置上cookie  
       //參數：用戶名-密碼-到期天數
        setCookie(username, password, num) {
          const time = new Date();
          time.setTime(time.getTime() + 24 * 60 * 60 * 1000 * num);
          //加上window.btoa是爲了對用戶名和密碼進行編碼，不讓cookie明文展現
          window.document.cookie = `userName=${window.btoa(username)}; path=/; expires=${time.toGMTString()}`;
          window.document.cookie = `passWord=${window.btoa(password)}; path=/; expires=${time.toGMTString()}`
        },

         //讀取cookie
        getCookie() {
          if (document.cookie.length > 0) {
            const cookieArr1 = document.cookie.split(";");
            for (let i in cookieArr1) {
              const cookieArr2 = cookieArr1[i].split("=");
              //避免輸入中含有空格，消除文本框空格
              cookieArr2[0] = cookieArr2[0].replace(/\s+/g, "");
              cookieArr2[1] = cookieArr2[1].replace(/\s+/g, "");
              if (cookieArr2[0] == "userName") {
                //讀取cookie而後進行解碼
                this.userName = window.atob(cookieArr2[1]);
              } else if (cookieArr2[0] == "passWord") {
                this.passWord = window.atob(cookieArr2[1]);
              }
            }
          }
        },

        //清除cookie
        clearCookie() {
          this.setCookie("", "", -1);
        },

    }
}
</script>