VUE实现简单的记住密码功能

用户在进行登录时，常常会在登录页面看到记住密码功能。一般是利用sessionStorage进行储存，这样做也是为了用户方便。 

 HTML代码：

<div class="login">
  <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
      <h1 class="title">
      <i class="el-icon-s-promotion"></i>
       管理系统
      </h1>      
  <el-form-item label="账号" prop="userId">
    <el-input type="text" v-model="loginForm.userId" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="passWord">
    <el-input type="password" v-model="loginForm.passWord" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item prop="rememberPwd">
    <div style="float:left;">
      <el-checkbox  v-model="loginForm.remember" />
      记住密码
    </div>
  </el-form-item>
  <el-form-item class="box">
    <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
    <el-button @click="resetForm('loginForm')">重置</el-button>
  </el-form-item>
</el-form>   
  </div>

组件化开发，使用elementUI来开发页面，容易上手，效果也能达到。

JS代码：

return {
        loginForm: {
          remember:false
        },  
created() {
    let account = sessionStorage.getItem("userId")
    let password = sessionStorage.getItem("passWord")
    // 如果存在赋值给表单，并且将记住密码勾选
    if(account){
      this.loginForm.userId = account
      this.loginForm.passWord = password
      this.loginForm.remember = true
    }
  },

methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {   
         let _this=this;
         this.axios.post('/api/checklogin',{    
             userId:_this.loginForm.userId,
             passWord:_this.loginForm.passWord         
         }).then(response=>{
           if(response.data.length){
            if(this.loginForm.remember==true) {
                    sessionStorage.setItem("userId", this.loginForm.userId);
                    sessionStorage.setItem("passWord", this.loginForm.passWord);
                  }
          _this.$store.commit('SAVE_USERINFO',response.data)//存储
                 this.$message({
                  message: '恭喜你，登录成功',
                  type: 'success'
        });
               //页面跳转
                  this.$router.push("/Home");
           }
           else{
                 this.$message.error('请检查用户名或密码');
           }
         })
          } else {
            return false;
          }
        });
      }
}

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）,不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。我这里是用sessionStorage进行功能测试，具体怎么用根据功能要求来。

CSS代码：

.login{
background-color: aqua;
  position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.el-form{
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 50px 45px ;
}
.el-form,.title{
  font-size: 20px;
  font-weight: bold;
   text-align: center;
   padding-bottom: 20px;
}
.el-form,.box{
  padding-right:55px;
}

 具体效果：

 当你重新打开网页登录时，就会发现已经记住密码了。