vue登录页面设置记住密码

vue使用cookie实现记住密码功能
1、样式结合elementui

<el-form :model="usermsg" ref="usermsg">
          <el-form-item prop="user" :rules="[{ required: true, message: '用户名不能为空'}]">
            <el-input prefix-icon="iconfont icon-yonghu" 
            type="text" 
            v-model.user.trim="usermsg.user"
            placeholder="用户名"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="psw" :rules="[{ required: true, message: '密码不能为空'}]">
            <el-input prefix-icon="iconfont icon-mima"
            type="password"
            ref="pw"
            v-model.psw.trim="usermsg.psw"
            placeholder="密码"
            >
            </el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
              <el-checkbox v-model="isRemember">
               记住密码
              </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>

2、实现思路
1）进入登录页面首先查看cookie中是否存储用户名、密码，如果有，将cookie中的用户名和密码绑定到form表单中，如果没有则将用户输入的用户名和密码存入cookie
2）设置记住密码就是在1）的基础上，在cookie中存一个标识

data() {
      return {
        usermsg: {
          user: '',
          psw: '',
        },
        isRemember: false//默认不记住密码
      };
    },
    mounted(){
      this.getCookie();  //首先判断cookie中的值
    },
    created(){
    //设置点击回车键直接登录
      document.onkeydown = (e)=>{
        var e = event || window.event;
        if(e && e.keyCode == 13){
          this.getLogin();   
        }
      }
    },
    methods: {
      getCookie(){
        if(document.cookie.length>0){
          var arr = document.cookie.split(";"); 
          for(var i = 0;i<arr.length; i++){
            var userKey = arr[i].split("=");
            if(userKey[0].trim() == "userName"){
               this.usermsg.user = userKey[1];
            }else if(userKey[0].trim() == "userPws"){
               this.usermsg.psw = userKey[1];
            }else if(userKey[0].trim() == "isRemember"){
               this.isRemember = Boolean(userKey[1]); 
            }
          }
        }
      },
      //存储
      setCookie(userName,userPws,days){
        var curDate = new Date();
            curDate.setTime(curDate.getTime() + 24*60*60*1000*days);  //设置cookie存储的有效时间
            window.document.cookie = "userName" + "=" + userName + ";path=/;expires=" + curDate.toGMTString();
            window.document.cookie = "userPws" + "=" + userPws + ";path=/;expires=" + curDate.toGMTString();
            window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + curDate.toGMTString();
      },
      //如果用户不选择记住密码清除cookie
      clearCookie(){
        this.setCookie("","",-1);
      },
      submitForm() {
      //登录时判断是否选择记住密码，如果是则设置cookie不是清除cookie，然后再调用登录函数进行登录
       if(this.isRemember == true){
          this.setCookie(this.usermsg.user,this.usermsg.psw,7)
        }else{
           this.clearCookie();
        }
        this.getLogin();  //调用登录函数
      },