vue项目实现表单登录页保存账号和密码到cookie功能

前端之家收集整理的这篇文章主要介绍了vue项目实现表单登录页保存账号和密码到cookie功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: center">

这里写图片描述

实现功能

1.一周内自动登录勾选时,将账号和密码保存到cookie,下次登陆自动显示到表单内

2.点击忘记密码则清空之前保存到cookie的值,下次登陆需要手动输入

次要的就不说了直接上主要的代码

html部分

Box v-model="checked" style="color:#a0a0a0;">一周内自动登录

js部分

{ if(res.body=="fail"){ alert("用户名或密码错误,请重新输入"); this.ruleForm.userName=''; this.ruleForm.password=''; return } else{ alert("登陆成功!") this.$router.push("/index") } }); },//设置cookie setCookie(c_name,c_pwd,exdays) { var exdate=new Date();//获取时间 exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数 //字符串拼接cookie window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString(); window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString(); },//读取cookie getCookie:function () { if (document.cookie.length>0) { var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下 for(var i=0;i修改2值都为空,天数为负1天就好了 } },//页面加载调用获取cookie值 mounted(){ this.getCookie() }

这里写图片描述

这里写图片描述

总结

以上所述是小编给大家介绍的vue实现表单登录页保存账号和密码到cookie功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/30567.html

猜你在找的Vue相关文章