良许Linux教程网 干货合集 Vue中使用js-cookie具体方法

Vue中使用js-cookie具体方法

​ js-cookie是一个简单的,轻量级的处理cookies的js API,用来处理cookie相关的插件

image-20220623223516520


一、安装js-cookie

cnpm i -S js-cookie

二、使用

1、局部使用

import Cookies from "js-cookie";

示例:


  
    当前token: {{token}}
    "getToken()">getToken
    "setToken('asdfasasf暗室逢灯fdasdf')">setToken
    "removeToken()">removeToken
  

  

import Cookies from "js-cookie";
export default {
  components: {},
  data() {
    return {
      token: ""
    };
  },
  methods: {
    getToken() {
      this.token = Cookies.get("token");
    },
    setToken(token) {
      Cookies.set("token", token);
    },
    removeToken: () => Cookies.remove("token")
  }
};

效果:

简单介绍Vue中使用js-cookie详情简单介绍Vue中使用js-cookie详情
简单介绍Vue中使用js-cookie详情简单介绍Vue中使用js-cookie详情

如果想要设置有效期,添加expires属性即可,单位为天。即:

setToken(token) {
    Cookies.set("token", token, { expires: 7 }); //有效期为7天
}

获取所有Cookie函数:Cookies.get();

2、全局使用

main.js中引入:

import Cookies from "js-cookie";
Vue.prototype.$cookie = Cookies;

使用:


  
    当前token: {{token}}
    "getToken()">getToken
    "setToken('asdfasasf暗室逢灯fdasdf')">setToken
    "removeToken()">removeToken
  

  

export default {
  data() {
    return {
      token: "",
      allCookies: ""
    };
  },
  methods: {
    getToken() {
      this.token = this.$cookie.get("token");
    },
    setToken(token) {
      this.$cookie.set("token", token, { expires: 7 }); //有效期为7天
    },
    removeToken() {
      this.$cookie.remove("token");
    }
  }
};

注意:全局使用js-cookie时,这里的removeToken函数就不要用箭头函数了,就用普通的函数写法

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部