實現記住密碼的功能（前端）

記住密碼和賬號的功能和后台無關，是由前端進行操作的。一般像這種操作會用到本地繪畫存儲技術（localStorage,sessionStorage,cookie，它們在存儲的時間，存儲大小...都有各自的區別，不太了解的話可以百度查詢一下相關文檔）。常理而言記住密碼一般都需要過期時間，所以根據這一特性可以利用cookie進行實現是個功能，（cookie可以設置過期時間）

<div class="count">
          <div class="user">
            <span class="iconfont iconzhanghao"></span>
            <el-input placeholder="請輸入賬號" v-model="ruleForm.username">
            </el-input>
          </div>
          <div class="pass">
            <span class="iconfont iconmima"></span>
            <el-input placeholder="請輸入密碼" v-model="ruleForm.password" type="password">
            </el-input>

          </div>
          <div class="remember">
            <el-checkbox v-model="remember">記住密碼</el-checkbox>
          </div>

          <!-- 登錄按鈕 -->
          <div class="login_btn">
            <el-button class="btn" type="primary" @click="login" round>主要按鈕</el-button>
          </div>
        </div>

邏輯代碼：

<script>
export default {
  data() {
    return {
      remember: false,
      // 利用cookie 實現記住密碼的功能
      ruleForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    // 登錄
    login() {
      var reg = /^[^\u4e00-\u9fa5]{0,}$/;
      console.log(this.ruleForm);
      if (
        this.ruleForm.username.trim() == "" ||
        this.ruleForm.password.trim() == ""
      ) {
        this.$message.warning("請填寫用戶名密碼！");
        return false;
      }
      // 用戶名和密碼不能相等
      if (this.ruleForm.username.trim() == this.ruleForm.password.trim()) {
        this.$message.warning("用戶名和密碼不能一致！");
        return false;
      }
      if (!reg.test(this.ruleForm.password.trim())) {
        this.$message.warning("密碼中不能含有中文！");
        return false;
      }
      //判斷復選框是否被勾選 勾選則調用配置cookie方法
      if (this.remember == true) {
        console.log("remember == true");
        // debugger;
        //傳入賬號名，密碼，和保存天數3個參數
        this.setCookie(this.ruleForm.username, this.ruleForm.password, 3);
      } else {
        console.log("清空Cookie");
        //清空Cookie
        this.clearCookie();
      }
      this.$message.success("登錄");
    },

    //設置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 () {
      if (document.cookie.length > 0) {
        console.log("獲取cookie document.cookie", document.cookie);
        var arr = document.cookie.split("; "); //這里顯示的格式需要切割一下自己可輸出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          console.log("arr2", arr2);
          //判斷查找相對應的值
          if (arr2[0] == "userName") {
            this.ruleForm.username = arr2[1]; //保存到保存數據的地方
          } else if (arr2[0] == "userPwd") {
            this.ruleForm.password = arr2[1];
          }
        }
      }
      if (this.ruleForm.username != "" && this.ruleForm.password != "") {
        this.remember = true;
      } else {
        this.remember = false;
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都為空，天數為負1天就好了
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.getCookie();
  },
};
</script>

style樣式（less語法）

.count {
        width: 80%;
        margin: 0 auto;
        margin-top: 30px;
        padding: 0 26px;
        box-sizing: border-box;
        .user,
        .pass {
          border-bottom: 1px solid #ccc;
          height: 80px;
          line-height: 100px;
          .iconfont {
            color: #b0b6b2;
            font-size: 24px;
          }
          display: flex;
          .el-input {
            border: none;
            /deep/.el-input__inner {
              border: none !important;
            }
          }
        }
        .remember {
          text-align: right;
          margin-top: 20px;
          color: #b0b6b2;
        }
        .login_btn {
          text-align: center;
          margin-top: 70px;
          width: 100%;
          .btn {
            width: 100%;
            height: 50px;
            font-size: 18px;
            color: white;
            text-align: center;
            border-radius: 30px;
            background: linear-gradient(
              90deg,
              rgba(136, 196, 101, 0.9),
              rgba(29, 170, 99, 0.9)
            );
            .el-button {
              /deep/.el-button--primary {
                border-color: transparent !important;
              }
            }
          }
        }
      }