直播软件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记住密码功能,更多内容欢迎关注之后的文章