直播软件app开发，vue记住密码功能

直播软件app开发，vue记住密码功能

记住密码和账号的功能由前端进行操作，而这种操作一般会用到本地存储。当然，本地存储的也不止密码和账号，还有是记住密码框的状态。

 

首先你需要封装三个方法用来存取数据，（password，username是用户密码绑定的值，checked是记住密码框的绑定值）

 

    // 设置cookie
    setCookie (c_name, c_pwd, c_state, exdays) {
      const exdate = new Date()
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      window.document.cookie = 'username' + '=' + c_name + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'password' + '=' + c_pwd + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'state' + '=' + c_state + ';path=/;expires=' + exdate.toGMTString()
    },
    // 读取cookie
    getCookie () {
      if (document.cookie.length > 0) {
        const arr = document.cookie.split('; ')
        for (let i = 0; i < arr.length; i++) {
          const arr2 = arr[i].split('=')
          console.log(arr[2])
          if (arr2[0] === 'username') {
            this.username = arr2[1]
          } else if (arr2[0] === 'password') {
            this.password = arr2[1]
          } else if (arr2[0] === 'state') {
            this.checked = Boolean(arr2[1])
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie('', '', false, -1)
    }

​

 然后，在你登录的时候判断是否记住密码并将密码和账号存在cookie中

 

// 判断复选框是否被勾选 勾选则调用配置cookie方法
if (this.checked === true) {
    this.setCookie(this.username, this.password, true, 7)
} else {
    this.clearCookie()
}

 

最后在页面挂载的时候调用cookie读取方法即可

 

mounted () {
    this.getCookie()
}, 

 

以上就是 直播软件app开发，vue记住密码功能，更多内容欢迎关注之后的文章