vue中cookies的使用方式
更新时间:2024年08月31日 08:44:34 作者:芒果沙冰哟
这篇文章主要介绍了vue中cookies的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue中cookies的使用
有时候做登录时会有一个记住密码的需求,这个时候可以使用cookies把账号密码存起来,下次再进来就免去了输入账号密码的需求,
- 如图:

原生cookies操作比较麻烦
这里我们使用js-cookies,先下载:
npm install --save js-cookie
安装成功后在需要的地方进行调用:
import Cookies from "js-cookie";
先看看在data中定义的表单数据:
data() {
return {
//登录表单
loginForm: {
username: "", //用户名
password: "", //密码
captcha: "", //验证码的值
isRemember: false, //是否记住密码
},
}
},写在methods中的函数:
created() {
//一进页面就先获取cookies里面的参数
this.getCookie()
},
methods: {
// 获取cookie参数
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const isRemember = Cookies.get("isRemember");
this.loginForm.username =
username == undefined ? this.loginForm.username : username;
this.loginForm.password =
password == undefined ? this.loginForm.password : decrypt(password);
this.loginForm.isRemember =
isRemember == undefined ? false : Boolean(isRemember);
Cookies.remove('data');
},
},
onLogin() {
//点击登录函数时,如果勾选记住密码
if (this.loginForm.isRemember) {
// 把账号密码等参数存到cookies,设置时间为30天
Cookies.set("username", this.loginForm.username, {
expires: 30,
});
Cookies.set("password", this.loginForm.password, {
expires: 30,
});
Cookies.set("isRemember", this.loginForm.isRemember, {
expires: 30,
});
} else {
//如果此时没有勾选记住密码,就把cookies里面的参数移除
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("isRemember");
}
//把登录名和用户名存好后,开始发接口请求数据,此处省略....
},cookies的使用方式:储存、获取、删除三种
- 存:
Cookies.set('userName', '嘻嘻嘻', { expires: 3 });- 取:
JSON.parse(Cookies.get('userName'))- 删:
Cookies.remove('userName')总结
大功告成,完结~
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3 使用provide inject父子组件传值失败且子组件不响应
这篇文章主要介绍了vue3使用provide inject父子组件传值传不过去且传递后子组件不具备响应性问题解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
关于vue v-for循环解决img标签的src动态绑定问题
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue利用computed配合watch实现监听多个属性的变化
这篇文章主要给大家介绍了在Vue中巧用computed配合watch实现监听多个属性的变化的方法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-10-10


最新评论