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

该博客介绍了一个Vue项目中实现表单登录并自动保存账号和密码到Cookie的功能。当用户勾选'一周内自动登录'时,账号和密码会被保存,下次登录时自动填充;点击'忘记密码'则清除Cookie,下次需手动输入。文章包含HTML和JS代码示例,涉及设置、读取和清除Cookie的方法,并在页面加载时自动获取Cookie值。
摘要由CSDN通过智能技术生成

e44602c1ca593a0eb8e7fa7131970150.png

实现功能:

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

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

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

html部分

登陆

帮助

一周内自动登录

忘记密码?

登陆

js部分

data () {

return {

ruleForm: {

userName: '', //用户名

password: '' //密码

},

}

}

methods: {

//点击登录调用方法

submitForm(formName) {

//保存的账号

var name=this.ruleForm.userName;

//保存的密码

var pass=this.ruleForm.password;

if(name==''||name==null){

alert("请输入正确的用户名");

return

}else if(pass==''||pass==null) {

alert("请输入正确的密码");

return

}

//判断复选框是否被勾选 勾选则调用配置cookie方法

if(this.checked=true){

//传入账号名,密码,和保存天数3个参数

this.setCookie(name,pass,7);

}

//接口

var url='myserver/user/login';

this.$http.post(url,this.ruleForm,{emulateJSON:true})

.then(res=>{

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

var arr2=arr[i].split('=');//再次切割

//判断查找相对应的值

if(arr2[0]=='userName'){

this.ruleForm.userName=arr2[1];//保存到保存数据的地方

}else if(arr2[0]=='userPwd'){

this.ruleForm.password=arr2[1];

}

}

}

},

//清除cookie

clearCookie:function () {

this.setCookie("","",-1);//修改2值都为空,天数为负1天就好了

}

},

//页面加载调用获取cookie值

mounted(){

this.getCookie()

}

b3df67d36578cf9fab1424da084334d5.png

1d2922f3e21a127c94ab925f934ef19d.png

总结

以上所述是小编给大家介绍的vue实现表单登录页保存账号和密码到cookie功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值