html

<div class="flex-container">
    <form @submit.prevent="submit" novalidate="true">
      <div id="welcome">歡迎使用聚播微信客服系統</div>
      <div class="username">
        <i class="fa fa-user-circle-o " aria-hidden="true">使用者名稱
          <input type="text" name="" id="username" placeholder="使用者名稱" maxlength="20" v-model="username" autofocus required><br />
        </i>
      </div>
      <div class="password" style="height:40px;">
        <i class="fa fa-key" aria-hidden="true"> 密&nbsp;&nbsp;&nbsp;碼
          <input type="password" name="" id="password" placeholder="密碼" maxlength="20" v-model="password" required><br />
        </i>
        <div style="height:20px;">
          <div v-if="errors.length" v-text="errors" id="errorMsg"></div>
        </div>
      </div>
      <div class="remember">
        <input type="checkbox" name="" id="rememberPassword" v-model="checked">
        <label for="rememberPassword" id="label1" @mouseover="addClass('label1')" @mouseout="deleteClass('label1')">記住密碼</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="forgetPassword" @mouseover="addClass('forgetPassword')" @mouseout="deleteClass('forgetPassword')">忘記密碼</span>
      </div>
      <input class="submit" id="submitInput" type="submit" value="登陸" @mouseover="addClass('submitInput')" @mouseout="deleteClass('submitInput')">
    </form>
  </div>
 

data

data () {
    return {
      username: '',
      password: '',
      checked: false
    }
  },

使用者名稱密碼正確之後，才儲存使用者名稱密碼

// 省略登陸程式碼
this.$store.dispatch('LoginByUsername', loginForm).then(() => {
          console.log('回到longin.vue')
          // 記住密碼
          if (typeof (Storage) !== 'undefined') {
            console.log('支援web儲存')
            if (document.getElementById('rememberPassword').checked) {
              // alert('checkbox is checked')
              console.log('記住密碼')
              let userinfo = { username: _this.username, password: _this.password, checked: true }
              localStorage.setItem('userinfo', JSON.stringify(userinfo))
              console.log(localStorage.getItem('userinfo'))
            } else {
              localStorage.removeItem('userinfo')
              localStorage.removeItem('rememberPassword')
              console.log('移除localStorage')
            }
          } else {
            console.log(' 抱歉! 不支援 web 儲存。')
          }
          this.$router.push({ path: '/' }) // 登入成功之後重定向到首頁
        }).catch(error => {
          _this.errors = _this.$store.getters.logs[0]
          return Promise.reject(error)
        })
 

created

created () {
    let userinfo = localStorage.getItem('userinfo')
    if (userinfo) {
      userinfo = JSON.parse(localStorage.getItem('userinfo'))
      console.log(userinfo)
      this.username = userinfo.username
      this.password = userinfo.password
      this.checked = true
    }
  },