vue中cookies的使用方式

高原浪花

vue中cookies的使用

有时候做登录时会有一个记住密码的需求，这个时候可以使用cookies把账号密码存起来，下次再进来就免去了输入账号密码的需求，

• 如图：
  

原生cookies操作比较麻烦

这里我们使用js-cookies，先下载：

1. npm install --save js-cookie

复制代码

安装成功后在需要的地方进行调用：

1. import Cookies from "js-cookie";

复制代码

先看看在data中定义的表单数据：

1.   data() {
   
2.       return {
   
3.         //登录表单
   
4.         loginForm: {
   
5.           username: "", //用户名
   
6.           password: "", //密码
   
7.           captcha: "", //验证码的值
   
8.           isRemember: false, //是否记住密码
   
9.         },
   
10.       }
    
11.     },

复制代码

写在methods中的函数：

1. created() {
   
2.       //一进页面就先获取cookies里面的参数
   
3.       this.getCookie()
   
4.     },
   
5.     methods: {
   
6.       // 获取cookie参数
   
7.       getCookie() {
   
8.         const username = Cookies.get("username");
   
9.         const password = Cookies.get("password");
   
10.         const isRemember = Cookies.get("isRemember");
    
11.         this.loginForm.username =
    
12.           username == undefined ? this.loginForm.username : username;
    
13.         this.loginForm.password =
    
14.           password == undefined ? this.loginForm.password : decrypt(password);
    
15.         this.loginForm.isRemember =
    
16.           isRemember == undefined ? false : Boolean(isRemember);
    
17.         Cookies.remove('data');
    
18.       },
    
19.     },
    
20.     onLogin() {
    
21.       //点击登录函数时,如果勾选记住密码
    
22.       if (this.loginForm.isRemember) {
    
23.         // 把账号密码等参数存到cookies,设置时间为30天
    
24.         Cookies.set("username", this.loginForm.username, {
    
25.           expires: 30,
    
26.         });
    
27.         Cookies.set("password", this.loginForm.password, {
    
28.           expires: 30,
    
29.         });
    
30.         Cookies.set("isRemember", this.loginForm.isRemember, {
    
31.           expires: 30,
    
32.         });
    
33.       } else {
    
34.         //如果此时没有勾选记住密码,就把cookies里面的参数移除
    
35.         Cookies.remove("username");
    
36.         Cookies.remove("password");
    
37.         Cookies.remove("isRemember");
    
38.       }
    
39.       //把登录名和用户名存好后,开始发接口请求数据,此处省略....
    
40.     },

复制代码

cookies的使用方式：储存、获取、删除三种

• 存：
  

1. Cookies.set('userName', '嘻嘻嘻', { expires: 3 });

复制代码

• 取：
  

1. JSON.parse(Cookies.get('userName'))

复制代码

• 删：
  

1. Cookies.remove('userName')

复制代码

总结

大功告成，完结~
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/3267464dv.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！