vue 记住密码功能
展示
html
<van-checkbox v-model="isChecked" icon-size="16px" checked-color="#4188F2" shape="square">记住密码</van-checkbox>
data
isChecked: true, // 记住密码
created
created () {
this.getCookie()
},
methods
// 设置cookie
setCookie (name, pwd, exdays) {
var exdate = new Date()// 获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 保存的天数
// 字符串拼接cookie
window.document.cookie = 'userName' + '=' + name + ';path=/;expires=' + exdate.toGMTString()
window.document.cookie = 'userPwd' + '=' + pwd + ';path=/;expires=' + exdate.toGMTString()
},
// 读取cookie 将用户名和密码回显到input框中
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.username = arr2[1]// 保存到保存数据的地方
// 其中unescape() 方法是将字符串进行编码,escape()方法是将字符串进行解码。
} else if (arr2[0] === 'userPwd') {
this.password = arr2[1]
}
}
}
},
// 点击登录按钮的时候,判断是否勾选了自动登录(记住密码),对cookie做相应操作
if (this.isChecked) {
// 传入账号名,密码,和保存天数14个参数
this.setCookie(this.ruleForm.userName, this.ruleForm.password, 14)
} else {
// 如果没有选中自动登录,那就清除cookie
this.setCookie('', '', -1) // 修改2值都为空,天数为负1天就好了
}