直播app系統原始碼，使用者登入後選擇記住密碼，下次自動填充密碼

直播app系統原始碼，使用者登入後選擇記住密碼，下次自動填充密碼實現的相關程式碼

 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;
}

以上就是直播app系統原始碼，使用者登入後選擇記住密碼，下次自動填充密碼實現的相關程式碼， 更多內容歡迎關注之後的文章