直播軟體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記住密碼功能，更多內容歡迎關注之後的文章