Vue中使用js-cookie详情

目录
  • 一、安装js-cookie
  • 二、使用
    • 1、局部使用
    • 2、全局使用

一、安装js-cookie

cnpm i -S js-cookie

二、使用

1、局部使用

import Cookies from "js-cookie";​​​​​​​

示例： 

<template>
  <div>
    <p>当前token： {{token}}</p>
    <el-button @click="getToken()">getToken</el-button>
    <el-button @click="setToken('asdfasasf暗室逢灯fdasdf')">setToken</el-button>
    <el-button @click="removeToken()">removeToken</el-button>
  </div>
</template>
 
<script>
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")
  }
};
</script>

效果：

如果想要设置有效期，添加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;

使用： 

<template>
  <div>
    <p>当前token： {{token}}</p>
    <el-button @click="getToken()">getToken</el-button>
    <el-button @click="setToken('asdfasasf暗室逢灯fdasdf')">setToken</el-button>
    <el-button @click="removeToken()">removeToken</el-button>
  </div>
</template>
 
<script>
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");
    }
  }
};
</script>

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

到此这篇关于Vue中使用js-cookie详情的文章就介绍到这了,更多相关Vue使用js-cookie内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue项目中js-cookie的使用存储token操作

    1.安装js-cookie # npm install js-cookie --save # yarn add js-cookie 2.引用(需要的文件) import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(tcuncuoken) { return Coo

  • 轻量级JS Cookie插件js-cookie的使用方法

    Cookie是网站设计者放置在客户端的小文本文件,一般后台语言使用的比较多,可以实现用户个性化的一些需求.js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级.js-cookie也支持npm和Bower安装和管理.下面看看js-cookie的具体用法. A simple, lightweight JavaScript API for handling cookies Works in all browsers Accepts any character H

  • 利用js-cookie实现前端设置缓存数据定时失效

    一.背景 业务需要在前端进行数据的缓存,到期就删除再进行获取新数据. 二.实现过程 前端设置数据定时失效的可以有下面2种方法: 1.当数据较大时,可以利用localstorage,存数据时候写入一个时间,获取的时候再与当前时间进行比较 2.如果数据不超过cookie的限制大小,可以利用cookie比较方便,直接设置有效期即可. 3.更多(请大神指点) 利用localstorage实现 localstorage实现思路: 1.存储数据时加上时间戳 在项目开发中,我们可以写一个公用的方法来进行存储的

  • Vue中使用js制作进度条式数据对比动画

    Vue中使用js制作进度条式数据对比动画

    本文实例为大家分享了Vue中使用js制作进度条式数据对比动画的具体代码,供大家参考,具体内容如下 实现的效果:(初始化以及浏览器resize的时候两侧的条形为向两侧递增的动画,其中两端的数字也是递增的动画) HTML部分: <div class="no-ivatargo-chart-b">   <div class="investment-ability">     <div class="title">  

  • vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /** * 参考文档 * [eslint英文文档]https://eslint.org/docs/user-guide/configuring * [eslint中文文档]http://eslint.cn/docs/rules/ */ /** * eslint有三种使用方式 * [1]js代码中通过注释

  • 在Vue中如何使用Cookie操作实例

    在Vue中如何使用Cookie操作实例

    大家好,由于公司忙着赶项目,导致有段时间没有发布新文章了.今天我想跟大家谈谈Cookie的使用.同样,这个Cookie的使用方法是我从公司的项目中抽出来的,为了能让大家看懂,我会尽量写详细点.废话少说,我们直接进入正题. 一.安装Cookie 在Vue2.0下,这个貌似已经不需要安装了.因为当你创建一个项目的时候,npm install 已经为我们安装好了.我的安装方式如下: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpa

  • Vue中fragment.js使用方法详解

    大部分内容源自 jQuery,当然,同时也参考了 component/domify ,如果有兴趣去这翻阅原始的代码,可以到 jQuery 中查找 wrapMap:至于 domify,直接到 github 搜索即可,相关项目类容很少,直接看 index.js 就行了. createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办,比如说一次插入 10000 个节点? 最简单粗暴的方式就是: var parent = document.getElementById('pa

  • Vue中fragment.js使用方法小结

    createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办,比如说一次插入 10000 个节点? 最简单粗暴的方式就是: var parent = document.getElementById(`'parent'`); for`(`var i = 0; i < 10000; i++) { var child = document.createElement(`'div'`); var text = document.createTextNode(`'' + i);

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • Vue中使用js-cookie详情

    Vue中使用js-cookie详情

    目录 一.安装js-cookie 二.使用 1.局部使用 2.全局使用 一.安装js-cookie cnpm i -S js-cookie 二.使用 1.局部使用 import Cookies from "js-cookie";​​​​​​​ 示例:  <template>   <div>     <p>当前token: {{token}}</p>     <el-button @click="getToken()&quo

  • vue中设置、获取、删除cookie的方法

    1.在src目录下的access下新建一个cookie.js, 内容如下: export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() //console.lo

  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑! 开发环境: webpack+vue+java后台 要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下: 先把这几个方法写上,删除的看需求决定需不需要:

  • Vue中使用 class 类样式的方法详情

    Vue中使用 class 类样式的方法详情

    在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在 style 标签中 书写一个类名为 active的样式 <style> .active{ color: red; font-size: 20px; font-style: normal; } </style> 在我们的 script 标签中创建一个 vm 实例,在实例的 data 数据中心写上 isActive:true , true 表示使用此样式,false 则表示不使用 <script

随机推荐