Vue使用Cookie实现记住密码功能？

Vue使用Cookie实现记住密码功能？

实现功能：
1.不勾选，点击登陆后，输入框中的值会被清空，下次登陆需要手动输入
2.记住密码勾选，点登陆后，将账号和密码保存到cookie，下次登陆自动显示到登录框内

实现思路：
通过存/取/删cookie实现的；
取：每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，如果没有就需要用户手动输入。
存：cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号信息存到cookie当中，反之则不保存。
删：执行cookie的setCookie方法清空账户信息。

1.html部分

代码如下（示例）：

<el-form
            :model="loginForm"
            status-icon
            ref="loginForm"
            class="login-form"
          >
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="loginForm.username"
                autocomplete="off"
                placeholder="用户名/手机号"
                clearable
              >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <span class="form-tip" v-if="isshow">用户名或密码不能为空</span>
            <el-form-item prop="password" style="margin: 0">
              <el-input
                type="password"
                v-model="loginForm.password"
                autocomplete="off"
                placeholder="密码"
                clearable
              >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
             <div class="check-area">
                <el-checkbox v-model="isChecked">记住密码</el-checkbox>
             </div>
            <el-button type="primary" @click="login" class="login-btn">登录</el-button>
          </el-form>

2.js部分

代码如下（示例）：

 data() {
    return {
      loginForm: {},
      isChecked: false,
      isshow: false
    };
  },
  created(){
    if(localStorage.getItem('isChecked') == 'true'){
      this.getCookie();
      this.isChecked = true
    }
  },
  methods: {
    login() {
      // 当用户名或者密码为空的时候出现提示
      if(!this.loginForm.username || !this.loginForm.password){
        this.isshow = true
      } else {
        this.isshow = false
        this.apis.getLogin({
          password: this.loginForm.password,
          loginName: this.loginForm.username
        }).then(res=>{
          let {code,msg,data} = res
          if(code == 0){
              //判断复选框是否被勾选 勾选则调用配置cookie方法
            if (this.isChecked == true) {
              this.setCookie(this.loginForm.username, this.loginForm.password, 7);
            } else {
              this.clearCookie()
            } 
            this.$message.success("登陆成功！")
            this.$router.push({ path: '/currentData' });
            localStorage.setItem('isChecked',this.isChecked)
            localStorage.setItem('userInfo',JSON.stringify(data))
          }else{
            this.$message.error("登录失败！")
          }
        })  
      }
    },
    setCookie(cname,cpwd,cdays) {
      //获取当前时间
      var curDate = new Date();
      //设置7天过期时间
      curDate.setTime(curDate.getTime() + 24*60*60*1000*curDate*cdays);
      //字符串拼接cookie
      window.document.cookie = "username"+"="+cname+";path=/;expires="	 + curDate.toLocaleString();
      window.document.cookie = "password"+"="+cpwd+";path=/;expires="	 + curDate.toLocaleString();
    },
    //获取cookie
    getCookie() {
        if(document.cookie.length > 0) {
        var arr = document.cookie.split("; ");
        for(var i=0;i<arr.length;i++) {
          var arr2 = arr[i].split("=");
          if(arr2[0] == "username") {
            this.$set(this.loginForm,'username',arr2[1])
          } else if(arr2[0] == "password") {
            this.$set(this.loginForm,'password',arr2[1])
            this.loginForm.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie() {
      this.setCookie("","",-1);
    }
  }