登录时记住密码 (原生 和 vue)

1.原生
HTML：

<div class="login_box">
  <div class="inputLine">
      <img src="image/account.png" alt="" class="accountImg icon">
      <input type="text" class="login_input" id="account" placeholder="请输入用户名/手机/邮箱">
  </div>
  <div class="inputLine">
      <img src="image/password.png" alt="" class="pwImg icon">
      <input type="password" class="login_input" id="password" placeholder="请输入密码">
  </div>
  <div class="tips">
      <div class=" weui-cells weui-cells_checkbox remberPw">
          <label class="weui-cell weui-check__label" for="checked">
              <input type="checkbox" name="checkbox" class="weui-check" id="checked">
              <i class="weui-icon-checked"></i>
              <span class="checkTxt">记住密码</span>
          </label>
      </div>
      <div class="forgetPw"><a href="javascript:" class="forget">忘记密码？</a></div>
  </div>
  <button class="login" id="login">登录</button>
</div>

JS：

// 进入页面时
$(document).ready(function () {
    //如果以前选择了记住密码，则设置复选框的值，将密码和用户名取出来。 否则取消选中。
    if ($.cookie("checked") == "true") {
        //设置前端的复选框被选中
        $("#checked").prop("checked", true);
        $("#account").val($.cookie("account"));
        $("#password").val($.cookie("password"));
    }else{
        $("#checked").prop("checked", false);
    }
});

// 登录---跳转首页
$('#login').on('click',function(){
    //判断复选框的值
    Save();	
    //下面是具体的登录操作
    if($('#account').val()=='' || $('#password').val()==''){
        $('#account').parent().addClass('redBorder');
        $('#password').parent().addClass('redBorder');
        $.toast("请输入账号密码", "text");
    }else{
        $('#account').parent().removeClass('redBorder');
        $('#password').parent().removeClass('redBorder');
         window.location.href = 'home.html';
    }
});

//记住用户名密码
function Save() {
    //如果选择了
  if ($("#checked").prop("checked")) {
      //取出页面上用户名和密码的值
    var str_username = $("#account").val();
    var str_password = $("#password").val();
    //利用cookie.js，放置到cookie中。 将用户名，密码，是否保存，放置到cookie中.
    $.cookie("checked", "true", { expires: 7 }); //存储一个带7天期限的cookie
    $.cookie("account", str_username, { expires: 7 });
    $.cookie("password", str_password, { expires: 7 });
  }
  //如果没有选择了,则取消cookie存储的值
  else {
    $.cookie("checked", "false", { expire: -1 });
    $.cookie("account", "", { expires: -1 });
    $.cookie("password", "", { expires: -1 });
  }
};

2.vue

html：

<el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="60px"  class="demo-ruleForm">
  <el-form-item label="账号" prop="account">
    <el-input v-model="ruleForm.account" placeholder="请输入账号" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password" placeholder="请输入登录密码" autocomplete="off" type="password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
  </el-form-item>
  <div class="form_item">
    <el-checkbox v-model="checked">记住登录密码</el-checkbox>
    <router-link to="/forget_password" class="fgPw">忘记密码？</router-link>
  </div>
  <el-button type="primary" class="loginBtn" @click="submitForm('ruleForm')">登录</el-button>
</el-form>

JS：

data() {
    // 账号验证
    var checkAccount = (rule,value,callback)=>{
      if(!value){
        return callback(new Error('请输入账号！'))
      }else{
        callback()
      }
    };
    // 验证密码
    var checPassword = (rule,value,callback)=>{
      if(!value){
        return callback(new Error('请输入密码！'))
      }else{
        callback()
      }
    };
    return {
      // 登录表单
      ruleForm:{
        account:'',
        password:'',
      },
      rules:{
        account:[{validator: checkAccount, trigger: 'blur'}],
        password:[{validator: checPassword, trigger: 'blur'}],
      },
      checked:true,
    };
  },
  created(){
    this.getCookie();
  },
  methods: {
    // 登录
    submitForm: function (formName) {
      var _this = this;
      this.$refs[formName].validate((valid) => {
          if (valid) {
            //判断复选框是否被勾选 勾选则调用配置cookie方法
            if(_this.checked == true){
              console.log("checked == true");
              // 传入账号，密码和保存天数3个参数
              _this.setCookie(_this.ruleForm.account,_this.ruleForm.password,7)
            } else {
              console.log("清空Cookie");
              // 清空Cooker
              _this.clearCookie();
            }
            _this.$router.push({ path: "/management" });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },

    //设置cookie
    setCookie(c_account, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie = "userAccount" + "=" + c_account + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },

    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        this.checked = true;
        var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
        if(arr.length == 3){
          this.checked = true;
        } else {
          this.checked = false;
          this.ruleForm.account = '';
          this.ruleForm.password = '';
        }
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('='); //再次切割
          //判断查找相对应的值
          if (arr2[0] == 'userAccount') {
            this.ruleForm.account = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == 'userPwd') {
            this.ruleForm.password = arr2[1];
          }
        }
      } 
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    }
  },
  
  mounted() {},