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>