vue中cookies的使用
有时候做登录时会有一个记住密码的需求，这个时候可以使用cookies把账号密码存起来，下次再进来就免去了输入账号密码的需求，
- 如图：
原生cookies操作比较麻烦
这里我们使用js-cookies，先下载：
1 | npm install --save js-cookie |
安装成功后在需要的地方进行调用：
1 | import Cookies from "js-cookie"; |
先看看在data中定义的表单数据：
1 2 3 4 5 6 7 8 9 10 11 | data() { return { //登录表单 loginForm: { username: "", //用户名 password: "", //密码 captcha: "", //验证码的值 isRemember: false, //是否记住密码 }, } }, |
写在methods中的函数：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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的使用方式：储存、获取、删除三种
- 存：
1 | Cookies.set('userName', '嘻嘻嘻', { expires: 3 }); |
- 取：
1 | JSON.parse(Cookies.get('userName')) |
- 删：
1 | Cookies.remove('userName') |
总结
大功告成，完结~
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
