vue项目实现登录记住密码功能

<template>
  <div class="wrapper"> 
    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px" class="login-container" style="margin-top:10%">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" auto-complete="off" show-password placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="remember">记住密码</el-checkbox> 
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="logining">{{loginStr}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loginStr: '登录',
        logining: false,
        loginForm: {
          username: '',
          password: ''
        }, 
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' }, 
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }, 
          ]
        },
        checked: false
      };
    },
    mounted() {
      this.getCookie();
    },
    methods: {
      // 登录
      handleLogin(ev) {
        var _this = this;
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            if (_this.checked == true) {
              //传入账号名，密码，和保存天数3个参数
              _this.setCookie(_this.loginForm.username, _this.loginForm.password, 7);
            }else {
              //清空Cookie
              _this.clearCookie();
            }

			//调取后端接口登录的代码
			........
	},
	//设置cookie
    setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
     //读取cookie
     getCookie: function() {
       let _this=this
       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.loginForm.username = arr2[1]; //保存到保存数据的地方
           } else if (arr2[0] == 'userPwd') {
               _this.loginForm.password = arr2[1];
           }
         }
       }
     },
     //清除cookie
     clearCookie: function() {
       this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
     }
  }
  </script>