vue localStorage 实现记住密码

最新推荐文章于 2024-08-06 08:00:00 发布

顽石⚡

最新推荐文章于 2024-08-06 08:00:00 发布

阅读量2.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/sunfellow2009/article/details/83304885

版权

vue 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

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