直播app系统源码，用户登录后选择记住密码，下次自动填充密码

直播app系统源码，用户登录后选择记住密码，下次自动填充密码实现的相关代码

HTML代码：

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

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

JS代码：

<br>return {<br>        loginForm: {<br>          remember:false<br>        },  <br>created() {<br>    let account = sessionStorage.getItem("userId")<br>    let password = sessionStorage.getItem("passWord")<br>    // 如果存在赋值给表单，并且将记住密码勾选<br>    if(account){<br>      this.loginForm.userId = account<br>      this.loginForm.passWord = password<br>      this.loginForm.remember = true<br>    }<br>  },<br> <br>methods:{<br>        submitForm(formName) {<br>        this.$refs[formName].validate((valid) => {<br>          if (valid) {   <br>         let _this=this;<br>         this.axios.post('/api/checklogin',{    <br>             userId:_this.loginForm.userId,<br>             passWord:_this.loginForm.passWord         <br>         }).then(response=>{<br>           if(response.data.length){<br>            if(this.loginForm.remember==true) {<br>                    sessionStorage.setItem("userId", this.loginForm.userId);<br>                    sessionStorage.setItem("passWord", this.loginForm.passWord);<br>                  }<br>          _this.$store.commit('SAVE_USERINFO',response.data)//存储<br>                 this.$message({<br>                  message: '恭喜你，登录成功',<br>                  type: 'success'<br>        });<br>               //页面跳转<br>                  this.$router.push("/Home");<br>           }<br>           else{<br>                 this.$message.error('请检查用户名或密码');<br>           }<br>         })<br>          } else {<br>            return false;<br>          }<br>        });<br>      }<br>}

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

CSS代码：

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

以上就是直播app系统源码，用户登录后选择记住密码，下次自动填充密码实现的相关代码，更多内容欢迎关注之后的文章