登录界面记住密码的功能

登录界面记住密码的功能

这里是用localStorage来实现功能的，第一次登陆的时候记住用户名和密码还有当前的时间戳，然后下一次登录的时候就把此时的时间戳和上一次的相减。把这个差值和时间段的毫秒进行比较。

代码如下：
html：

<div style="width:500px;height:500px">
      <el-form label-width="80px" :model="ruleForm">
        <el-form-item label="账号">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
      <div>
        <el-checkbox v-model="checked">一周自动登录</el-checkbox>
      </div>
      <el-button type="primary" @click="submitForm" style="width:100%">登录</el-button>
      </el-form>
    </div>

js:

 data() {
    return {
      ruleForm: {
        userName: '',
        password: ''
      },
      checked:false
    };
  },

methods: {
    //点击登陆按钮，把用户名，密码和当前的时间戳存到缓存里面
    submitForm(){
      if(this.checked){
        var date=new Date()
        localStorage.setItem('userName',this.ruleForm.userName)
        localStorage.setItem('password',this.ruleForm.password)
        localStorage.setItem('startTime',date.getTime())
      }
      console.log('登陆成功！')
    },
    //判断是否记住密码
    checkLocalStorage(){
      var date=new Date()
      var nowtimeStamp=date.getTime();//现在的时间戳
      var beforetimeStamp=localStorage.getItem('startTime');//上次存的时间戳
      var localUserName=localStorage.getItem('userName');//上次存的用户名
      var localPassword=localStorage.getItem('password');//上次存的密码
      //根据时间戳判断是否需要记住密码
      if(nowtimeStamp - beforetimeStamp >= 7*24*60*60*1000){
        localStorage.clear()
      }else{
        this.ruleForm.userName=localUserName;
        this.ruleForm.password=localPassword;
        this.checked=true;
      }

    }
  },
  created(){
    //进入页面就去判断是否记住密码
    this.checkLocalStorage()
  }

页面效果：