The idea and process of Vue to realize the function of remembering account and password

<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="loginForm demo-ruleForm">
  <!-- Account -->
  <el-form-item label="Account" prop="userId" autocomplete="on">
    <el-input v-model="loginForm.userId" placeholder="Please enter your account number"></el-input>
  </el-form-item>
  <!-- Password -->
  <el-form-item label="password" prop="password">
    <el-input type="password" v-model="loginForm.password" placeholder="Please enter your password" @keyup.enter="submitForm('loginForm')"></el-input>
  </el-form-item>
  <div class="tip">
    <!-- Remember Me -->
    <el-checkbox v-model="checked" class="rememberMe">Remember me</el-checkbox>
    <!-- Retrieve Password -->
    <el-button type="text" @click="open()" class="forgetPw">Forgot your password? </el-button>
  </div>
  <!-- Login -->
  <el-form-item>
    <el-button type="primary" @click="submitForm('loginForm')" class="submit-btn">Login</el-button>
  </el-form-item>
</el-form>

//Install npm install --save js-base64
//Introduce const Base64 = require("js-base64").Base64

export default {
  data() {
    return {
      loginForm: {
        userId: "",
        password: "",
      },
      checked: false,
    };
  },
  mounted() {
    let username = localStorage.getItem("userId");
    if (username) {
      this.loginForm.userId = localStorage.getItem("userId");
      this.loginForm.password = Base64.decode(localStorage.getItem("password")); // base64 decryption this.checked = true;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /* ------ Storage of account and password ------ */
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password); // base64 encryption localStorage.setItem("userId", this.loginForm.userId);
            localStorage.setItem("password", password);
          } else {
            localStorage.removeItem("userId");
            localStorage.removeItem("password");
          }
          /* ------ http login request ------ */
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};

export default {
  data() {
    return {
      loginForm: {
        userId: "",
        password: "",
      },
      checked: false,
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /* ------ Storage of account and password ------ */
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password); // base64 encryption this.setCookie(this.loginForm.userId, password, 7);
          } else {
            this.setCookie("", "", -1); // Modify both values ​​to be empty, and the number of days to be negative 1 day}
          /* ------ http login request ------ */
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    
    // Set cookies
    setCookie(userId, password, days) {
      let date = new Date(); // Get time date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // Number of days to save // ​​String concatenation cookie
      window.document.cookie =
        "userId" + "=" + userId + ";path=/;expires=" + date.toGMTString();
      window.document.cookie =
        "password" + "=" + password + ";path=/;expires=" + date.toGMTString();
    },
    
    // Read the cookie and echo the username and password to the input box getCookie() {
      if (document.cookie.length > 0) {
        let arr = document.cookie.split("; "); //Split into independent "key=value" forms for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); // Split again, arr2[0] is the key value, arr2[1] is the corresponding value
          if (arr2[0] === "userId") {
            this.loginForm.userId = arr2[1];
          } else if (arr2[0] === "password") {
            this.loginForm.password = Base64.decode(arr2[1]); // base64 decryption this.checked = true;
          }
        }
      }
    },
  },
};