Vue中使用js-cookie

js-cookie 是关于 cookie 存储的一个js的API，根据官网描述其优点有：适用所有浏览器、接受任何字符、经过任何测试没什么 bug、支持 CMD 和 CommonJS、

压缩之后非常小，仅900个字节。

参考文档: https://www.npmjs.com/package/js-cookie

1.安装

npm install js-cookie --save

也可以直接使用 js-cookie.js

https://lib.baomitu.com/js-cookie/3.0.1/js.cookie.js

2.引入

1.全局引入

// main.js
import jsCookie from 'js-cookie'
Vue.prototype.$cookie = jsCookie;  // 在页面里可直接用 this.$cookie 调用

2.按需引入

import Cookies from 'js-cookie'
Cookies.set('foo', 'bar')

3.使用

1.写入Cookie

Cookies.set('name', 'value')
Cookies.set('name', 'value', { expires: 7 })
Cookies.set('name', 'value', { expires: 7, path: '' })

2.读取Cookie

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
Cookies.get() // => { name: 'value' }
Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!

3.删除Cookie

Cookies.remove('name')
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!
Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

4.Cookie的属性

1.过期时间 expires

定义什么时候删除cookie中的数据，值必须为number .

默认: 当用户关闭浏览器时，删除Cookie

Cookies.set('name', 'value', { expires: 365 })
Cookies.get('name') // => 'value'
Cookies.remove('name')

2.path-路径

默认: /

Cookies.set('name', 'value', { path: '' })
Cookies.get('name') // => 'value'
Cookies.remove('name', { path: '' })

3.domain

一个字符串，指示一个有效的域，其中cookie应该是可见的。cookie对所有子域也是可见的。

默认: Cookie只对创建Cookie的页面的域或子域可见，Internet Explorer除外(见下文)。

假设一个正在site.com上创建的cookie:

Cookies.set('name', 'value', { domain: 'subdomain.site.com' })
Cookies.get('name') // => undefined (need to read at 'subdomain.site.com')

4.secure

true或false，表示cookie传输是否需要安全协议(https)。

默认: 没有安全协议

Cookies.set('name', 'value', { secure: true })
Cookies.get('name') // => 'value'
Cookies.remove('name')

5.sameSite

一个字符串，允许控制浏览器是否在跨站点请求时发送cookie。

Cookies.set('name', 'value', { sameSite: 'strict' })
Cookies.get('name') // => 'value'
Cookies.remove('name')