vue登录页面实现记住密码的操作

首先看一下思路
思路：
①点击登录按钮→调用接口→如果调用成功，判断是否选择记住密码→如果选择记住密码，则把用户名与密码存到cookie中，否则清除cookie
②点击返回登录页→在登录页created函数中获取用户名与密码赋值给input，checked设置为true
代码如下，后面的数据展示可根据自身要求进行更改
html代码

    <div class="loginer">
      <div class="login_m">
        <div class="middle_left">
          <h1>欢迎登录</h1>
          <h3>河北畜牧兽医综合信息管理平台</h3>
        </div>
        <div class="middle_right">
          <div class="mr_box">
            <span>用户登录</span>
            <p class="shuru">
              <i class="icon iconfont icon-Profile i_posi"></i
              ><input
                v-model="model.username"
                placeholder="请输入您的用户名/手机号"
              />
            </p>
            <p class="shuru">
              <i class="icon iconfont icon-Unlock i_posi"></i
              >
              <input type="password" v-model="model.password" placeholder="请输入密码">
            </p>
            <div class="remember">
              <input
                class="jizhu"
                type="checkbox"
                v-model="isChecked"
              />记住密码
            </div>
            <div class="f_pass_n" v-show="isShow">
              <i class="icon iconfont icon-tanhao i_color"></i>
              <p class="error">{{tips}}</p>
            </div>
            <div class="dengl" @click="toLogin()">
              <input
                class="login"
                type="button"
                name="btn1"
                id="btn1"
                value="登录"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

data里的代码

  data () {
    return {
      // 登录信息
      model: {
        username: '',
        password: ''
      },
      // 记住密码
      isChecked: true, // 记住密码
      arr: [],
      arr2: [],
      // 隐藏错误提示start 这个例子中可以忽略这个值
      isShow: false,
      tips: ''
      // 隐藏错误提示end
    }
  },

methods代码:在登录的方法中我还没有调用接口，所以只用了简单的条件判断

    // 记住密码start
    // 设置cookie
    setCookie (name, pwd, exdays) { // 用户名、密码、保存天数
      var exdate = new Date() // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
      // 字符串拼接cookie
      window.document.cookie = 'userName=' + name + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'userPwd=' + pwd + ';path=/;exires=' + exdate.toGMTString()
    },
    // 读取cookie
    getCookie () {
      if (document.cookie.length > 0) {
        // console.log('cookie数据' + document.cookie) // 格式：userName=qq; userPwd=11
        this.arr = document.cookie.split(' ')
        // console.log('111' + this.arr)
        for (let i = 0; i < this.arr.length; i++) {
          this.arr2 = this.arr[i].split('=')
          // console.log('arr2' + this.arr2) // 格式：userName,qq; userPwd,11
          // 判断查找相对应的值
          if (String(this.arr2[0]) === String('userName')) {
            console.log('有valname：' + this.arr2[1]) // 格式 有值val：qq;
            this.model.username = this.arr2[1].replace(/;/g, '') // 删除尾部的';'
          } else if (String(this.arr2[0]) === String('userPwd')) {
            this.model.password = this.arr2[1].replace(/;/g, '')
            console.log('有valuepwd：' + this.arr2[1])
          }
        }
      }
    },
    // 清楚cookie
    clearCookie () {
      this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
    }
    // 记住密码 end
        // 点击登录
    toLogin () {
      if (this.model.username === '') {
        // alert('请正确输入用户名')
        this.tips = '用户名不能为空,请重新输入!'
        this.isShow = true
      } else if (this.model.password === '') {
        // alert('请正确输入密码')
        this.tips = '密码不能为空,请重新输入!'
        this.isShow = true
      } else {
        if (this.isChecked) { // 记住密码
          this.setCookie(this.model.username, this.model.password, 30)
        } else {
          this.clearCookie() // 清空cookie
        }
        this.$router.push({ path: '/home/index' })
      }
    },

created代码

  created () {
    this.getCookie()
  },