前端vue+elementUI如何实现记住密码功能
我们这回使用纯前端保存密码
既然是记住密码，前端也就是使用cookie保存，访问时用cookie读取
先来了解下cookie的基本使用吧
Cookie
所有的cookie信息都在document.cookie中存放着，是一个字符串，里面的cookie以分号和空格分隔。就像这样：
"key1=value1;key2=value2;key3=value3" //使用document.cookie来获取所有cookie docuemnt.cookie="id="+value
操作cookie
/**
*设置cookie值
*
*@param{String}namecookie名称
*@param{String}valuecookie值
*@param{Number}expiredays过期时间，天数
*/
functionsetCookie(name,value,expiredays){
letexdate=newDate()
//setDate获取N天后的日期
exdate.setDate(exdate.getDate()+expiredays)//getDate()获取当前月份的日+过期天数
document.cookie=name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
}
/**
*获取cookie值
*@param{String}namecookie名称
*/
functiongetCookie(name){
vararr=document.cookie.split(";")//转换数组
//["_ga=GA1.1.1756734561.1561034020","mobile=123"password=456"]
for(vari=0;i
好了了解了cookie我们开始如何实现一个简单的记住密码功能
HTML代码
系统登录
记住密码
登录
vue代码
data(){
return{
logining:false,
checked:true
ruleForm:{
username:'',
password:'',
},
rules:{
username:[{required:true,message:'请输入您的帐户',trigger:'blur'}],
password:[{required:true,message:'请输入您的密码',trigger:'blur'}]
},
}
},
mounted(){
this.account()//获取cookie的方法
},
account(){
if(document.cookie.length<=0){
console.log(this.getCookie('mobile'))
this.ruleForm.username=this.getCookie('mobile')
this.ruleForm.password=this.getCookie('password')
}
},
setCookie(c_name,c_pwd,exdate){//账号，密码，过期的天数
varexdate=newDate()
console.log(c_name,c_pwd)
exdate.setTime(exdate.getTime()+24*60*60*1000*exdate)//保存的天数
document.cookie="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
document.cookie="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
},
getCookie(name){
vararr=document.cookie.split(";")
//["_ga=GA1.1.1756734561.1561034020","mobile=123"password=456"]
for(vari=0;i{
if(valid){
this.logining=true;
var_this=this;
if(_this.checked==true){
//存入cookie
_this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7)//保存7天
}else{
_this.clearCookie();
}
Login({
mobile:_this.ruleForm.username,
password:_this.ruleForm.password
}).then((result)=>{
console.log(result)
_this.$alert('登陆成功')
})
}
}
好了，这回的记住密码就到这里，小伙伴们一起努力吧^0^
总结
到此这篇关于前端vue+elementUI如何实现记住密码功能的文章就介绍到这了,更多相关vue+elementUI记住密码内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！