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

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

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

 

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

 

1

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

​

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

 

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

 

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

 

1	<br>mounted () {<br>    this.getCookie()<br>},

 

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