vue项目实现登陆页面保存密码到cookie功能

实现功能：

1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内
2.不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入

思路

大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号信息存到cookie当中，效果图如上：

HTML代码

    <div class="">
      <div class="form-item">
        <div class="icon-box">
          <i class="iconfont icon-people_fill"></i>
        </div>
        <div class="input-box">
          <input :maxlength="30" v-model="loginCode" type="text" placeholder="请输入用户名">
        </div>
      </div>
      <div class="form-item">
        <div class="icon-box">
          <i class="iconfont icon-lock_fill"></i>
        </div>
        <div class="input-box">
          <input @keyup.enter="login" :maxlength="30"  v-model="loginPwd" :type="pwdType" placeholder="请输入密码">
          <div class="eye" @click="pwdType = 'text'" v-show="pwdType === 'password'">
            <i class="iconfont icon-in_biyan_fill"></i>
          </div>
          <div class="eye" @click="pwdType = 'password'" v-show="pwdType === 'text'">
            <i class="iconfont icon-in_zhengyan_fill"></i>
          </div>
        </div>
      </div>
      <div class="checkbox-box">
        <el-checkbox v-model="saveUser">保存密码</el-checkbox>
      </div>
      <div class="button-box">
        <el-button :loading="logining" @click="login" type="primary" style="width:200px;">登录</el-button>
      </div>
    </div>

JS代码

  mounted () {
    // 页面加载调用获取cookie值
    this.getCookie()
  },
  
    methods: {
getAryByTree (obj, treeData) {
  for (let item of treeData) {
    obj[item.url] = item.id
    if (item.childrens && item.childrens.length > 0) {
      this.getAryByTree(obj, item.childrens)
    }
  }
  return obj
},
getUrlAryByRoleTree () {

},
login () {
  this.logining = true
  const self = this
  // 判断复选框是否被勾选 勾选则调用配置cookie方法
  if (self.saveUser === true) {
    console.log('checked == true')
    // 传入账号名，密码，和保存天数3个参数
    self.setCookie(self.loginCode, self.loginPwd, 7)
  } else {
    console.log('清空Cookie')
    // 清空Cookie
    self.clearCookie()
  }

  // 与后端请求代码，本功能不需要与后台交互所以省略
  console.log("登陆成功");
         });
      },
// 设置cookie
setCookie (userName, userPwd, exdays) {
  var exdate = new Date() // 获取时间
  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
  // 字符串拼接cookie
  window.document.cookie = 'userName' + '=' + userName + ';path=/;expires=' + exdate.toGMTString()
  window.document.cookie = 'userPwd' + '=' + userPwd + ';path=/;expires=' + exdate.toGMTString()
},
// 读取cookie
getCookie () {
  if (document.cookie.length > 0) {
    var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
    for (var i = 0; i < arr.length; i++) {
      var arr2 = arr[i].split('=') // 再次切割
      // 判断查找相对应的值
      if (arr2[0] === 'userName') {
        this.loginCode = arr2[1] // 保存到保存数据的地方
      } else if (arr2[0] === 'userPwd') {
        this.loginPwd = arr2[1]
      }
    }
  }
},
// 清除cookie
clearCookie () {
  this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
}

浏览器中的cookie信息如下图，注意这里的cookie的expire/Max-Age过期时间，这个时间是格林尼治标准时间GMT，世界统一的时间，GMT+8小时就是北京时间。(这里不做加密功能)