vue 设置cookie,vue中使用cookie
本文主要介绍在vue登录页面使用cookie记忆7天密码的方法。通过示例代码非常详细的介绍，对大家的学习或者工作都有一定的参考价值。下面让我们跟随边肖一起学习。
问题描述
在项目的登录页面，会有要求记住7天密码的功能。本文记录的编写方法，主要使用cookie。我详细地写了笔记。你可以看看我写的笔记的步骤，还是比较详细的。父母测试有效性
html部分
代码图
效果图
代码粘贴
el格式
ref=form
:model=form
标签宽度=80px
label-position=top
@submit.native.prevent
El-form-item label=用户名/账号
div class=userError
el输入
size=mini
v-model.trim=form.userName
可清除的
/el-input
/div
/El-表单-项目
El-form-item标签=密码
div class=pwdError
el输入
size=mini
v-model.trim=form.loginPwd
可清除的
显示-密码
/el-input
/div
/El-表单-项目
El-checkbox label=记住帐号 v-model= is remember /El-checkbox
El-button native-type= submit size= mini @ click= log in page
登录到/el按钮
/el格式
Js零件
导出默认值{
名称：登录，
data() {
返回{
表单：{
用户名： ，
loginPwd: ，
},
isRemember: false，
};
},
已安装(){
//第一步，页面加载时，首先检查cookie中是否有用户名和密码。
this . get cookie()；
},
方法：{
/*第三步，用户登录时，首先检查用户名和密码是否正确。
如果没有，会提示登录错误。
如果是，让我们看看用户是否检查了记住密码。
如果没有勾选，及时清除cookie，回到原来的状态。
如果选中，用户名和密码将存储在cookie中，并设置7天的有效期。
(当然也可能是更新前的cookie时间)
*/
异步登录页面(){
//发送请求，查看用户输入的用户名和密码是否正确
const res=等待这个。$api.loginByUserName(this.form)
if(res.isSuccess==false){
这个。$message.error(登录错误)
}
否则{
const self=this
//第四步，如果复选框被选中，调用set cookie方法，将当前用户名和密码以及过期时间保存到cookie中。
if(self . is member===true){
//三个参数：传入的帐户名、密码和保存天数(到期时间)
//1/24/60测试可以用一分钟，所以会比较明显。
self . set cookie(this . form . username，this.form.loginPwd，1/24/60)；
//self . set cookie(this . form . username，this.form.loginPwd，7)；//这是7天的到期时间。
}
//如果没有勾选，及时清除cookie，因为这个cookie可能是最后一个未过期的Cookie，所以要及时清除。
否则{
self . clear cookie()；
}
//当然，无论用户是否检查过cookie，都需要路由跳转。
这个。$router.push({
名称：项目，
});
}
},
//设置cookie
setCookie(用户名、密码、过期天数){
var ex Date=new Date()；//获取当前登录时间
ex date . settime(ex date . gettime()24 * 60 * 60 * 1000 * ex days)；//将当前登录时间加上七天，就是cookie过期的时间，也就是保存的天数。
//字符串拼接cookie，因为cookie是以name=value的形式存储的
window . document . cookie= userName = userName ；path=/；expires= ex date . togmtstring()；
window . document . cookie= user pwd = password ；path=/；expires= ex date . togmtstring()；
window . document . cookie= is remember = this . is remember ；path=/；expires= ex date . togmtstring()；
},
//第二步，如果cookie里有用户名和密码，就把它剪下来两次，保存在form表单里备用，否则就没有了。
getCookie: function () {
if (document.cookie.length 0) {
var arr=document . cookie . split(；);//因为是数组，所以要截。打印出来就知道了。
//console.log(arr， cut )；
for(var I=0；长度；i ) {
var arr2=arr[i]。拆分(=)；//再次剪切
//console.log(arr2，切2 )；
////判断找到相应的值
if (arr2[0]===userName) {
this . form . username=arr 2[1]；//转储保存的用户名和密码的副本
} else if (arr2[0]===userPwd) {
this . form . log in pwd=arr 2[1]；//可以解密
} else if(arr 2[0]=== is member ){
this . is remember=Boolean(arr 2[1])；
}
}
}
},
//清除cookie
clearCookie:傅！[图片](/img/bvcohz)
this.setCookie(， ，-1)；//清空并将天数设置为负1天
},
},
};
Cookie存储图标
总结
其实也很简单，就是设置一个失效时间，也就是cookie的失效日期。当然中间需要有一些格式处理和数据处理。
补充一下，cookies是存储在浏览器中的，浏览器是安装在电脑中的，比如说在c盘，所以cookies是存储在c盘的一个文件夹里，那个文件夹里不仅有cookies，还有localStorage，sessionStorage等等。你可以自己找出是哪个文件夹。其实所谓的本地存储其实是存在于你自己的电脑上的。
这就是这篇关于如何使用cookies来记住vue登录页面的7天密码的文章。关于vue登录页面如何通过cookies记住密码的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。