js-cookie和vue-cookies（Cookie使用教程）

比眉伴天荒 2023-10-04 22:27 51阅读 0赞

#### 简述：js-cookie和vue-cookies都是vue项目中的插件，下载相关依赖后，可以**用来存储、获取、删除Cookie等操作，**思路相同，操作时稍有不同，当然也可以用原生js来获取Cookie； ####

#### **⭐ js-cookie ⭐** ####

#### **使用方式：** ####

**1、下载安装依赖，js-cookie；**

//在项目中使用npm下载相关依赖
    
    npm install --save js-cookie

**2、页面引入使用；**

//然后在main.js或者需要使用的页面引入
    
    import Cookies from 'js-cookie'

**3、js-cookie，使用详细（存储 获取 删除）；**

**存储Cookie：**

// 创建一个名称为name，对应值为value的Cookie，由于没有设置失效时间，
    // 默认失效时间为该网站关闭时
    Cookies.set('name', 'value')
    
    // 创建一个有效时间为7天的Cookie
    Cookies.set('name', 'value', { expires: 7 })
    
    // 创建一个带有路径的Cookie
    Cookies.set('name', 'value', { expires: 7, path: '' })
    
    // 创建一个value为对象的Cookie
    const obj = { name: 'xiaohong' }
    Cookies.set('user', obj)

**获取Cookie：**

// 获取指定名称的Cookie
    Cookies.get(name) // value
    
    // 获取value为对象的Cookie
    const obj = { name: 'xiaohong' }
    Cookies.set('user', obj)
    JSON.parse(Cookies.get('user'))
    
    // 获取所有Cookie
    Cookies.get()

**删除Cookie：**

// 删除指定名称的Cookie
    Cookies.remove('name')
    
    // 删除带有路径的Cookie
    Cookies.set('name', 'value', { path: '' })
    Cookies.remove('name') //直接删，会报错！
    Cookies.remove('name', { path: '' }) // success!
    
    // more
    // 当你删除一个cookie时，你不依赖于默认属性，
    // 你必须传递与用来设置cookie完全相同的路径和域属性：
    Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

#### ⭐ vue-cookies ⭐ ####

#### **使用方式：** ####

**1、下载安装依赖，vue-cookies；**

npm i --save vue-cookies

**2、在main.js中，全局引入使用；**

import VueCookies from 'vue-cookies';
    Vue.use(VueCookies);

**3、vue-cookies，使用详细（存储 获取 删除）；**

**存储一个Cookie：**

this.$cookies.set("token", value1, {expires: "7D"});
      // keyName => "token"
      // value =>  value1
      // 设置过期时间 = > {expires: "7D"}

**获取一个Cookie：**

this.$cookies.get("token")    // return value

**删除一个Cookie：**

this.$cookies.remove("token"[, path [, domain]])    // return this

**Cookie是否存在：**

this.$cookies.isKey("token")    // return false or true

**获取所有 Cookie ，以数组形式返回：**

this.$cookies.keys()    // return a array

**设置Cookie过期时间：**

//30天后过期，全局设置
    this.$cookies.config('30d')
    
    y：year 年
    m：month 月
    d： day 日
    h：hour 时
    min： minute 分
    s ：second 秒
    //填的值1d为一天,1h为一小时,1min为一分钟,1s为1秒,不分大小写
    //不写过期时间，默认为1天过期

感觉有用，就一键三连，感谢(●'◡'●)