用户在进行登录时，常常会在登录页面看到记住密码功能。一般是利用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; }
具体效果：
当你重新打开网页登录时，就会发现已经记住密码了。
