我要评论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')总结
大功告成，完结~
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论