Vue第33篇，js-cookie和vue-cookies（Cookie使用教程）

前言

Cookies是网站发送至用户浏览器的小型文本文件，存储于用户设备上，用于追踪用户活动、保存偏好设置及维护登录状态。当用户重访网站时，浏览器会回传Cookies信息，使网站能识别用户，提供个性化服务。简而言之，Cookies帮助网站记住用户，实现定制化体验。

而js-cookie和vue-cookies都是vue项目中的插件。下载相关依赖后，可以在项目中用来存储、获取、删除Cookie等操作，思路相同，但操作时稍有不同，当然也可以用原生js来获取Cookie。这里来记录一下

---

一. js-cookie使用方法

1. 首先需要在项目中，下载安装依赖相关依赖

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

2. 可以直接在页面中，引入使用

//然后在main.js或者需要使用的页面引入

import Cookies from 'js-cookie'

3. js-cookie，使用详细

(1). 存储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)

(2). 获取Cookie：

// 获取指定名称的Cookie
Cookies.get(name) // value

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

// 获取所有Cookie
Cookies.get()

(3). 删除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. 首先同样在需要在项目中，下载安装依赖

npm i --save vue-cookies
||
cnpm i --save vue-cookies

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

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

3. vue-cookies，使用详细

(1). 存储一个Cookie：

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

(2). 获取一个Cookie：

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

(3). 删除一个Cookie：

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

(4). Cookie是否存在：

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

(5). 获取所有 Cookie ，以数组形式返回：

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

(6). 设置Cookie过期时间：

//30天后过期，全局设置
this.$cookies.config('30d')

y：year 年
m：month 月
d： day 日
h：hour 时
min： minute 分
s ：second 秒
//填的值1d为一天,1h为一小时,1min为一分钟,1s为1秒,不分大小写
//不写过期时间，默认为1天过期

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