实现记住密码的功能（前端）

记住密码和账号的功能和后台无关，是由前端进行操作的。一般像这种操作会用到本地绘画存储技术（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 {
         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;
           100%;
          .btn {
             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;
              }
            }
          }
        }
      }