js-cookie的使用

详细文档

js-cookie是一个简单的，轻量级的处理cookies的js API.
官方文档：https://www.npmjs.com/package/js-cookie
一个很详细的博客：https://blog.csdn.net/qq_20802379/article/details/81436634

安装

yarn add js-cookie 或 npm install js-cookie --save

若安装出错，建议安装较为稳定的2.2.1版本
yarn add js-cookie@2.2.1  或  npm install js-cookie@2.2.1 --save

注册

一、使用频率较低，建议随用随引，在需要使用的页面中
import Cookie from "js-cookie";  //引入
Cookies.set('name', 'value')  //使用

二、使用频率较高，建议全局挂载，在main.js中
import Cookie from "js-cookie";  //引入
Vue.prototype.$cookie = Cookie  //挂载全局

在所有页面：this.$cookie.set('name', 'value')  //使用

如何使用(以下为常用方式，详细使用见官方文档)

【存值】
//创建一个在整个网站上有效的cookie：
Cookies.set('name', 'value');

//创建一个有效期7天的cookie，该cookie在整个网站上均有效：
Cookies.set('name', 'value', { expires: 7 });

//创建一个有效期7天的cookie，该cookie对当前页面的路径有效：
Cookies.set('name', 'value', { expires: 7, path: '' });

//创建一个有效期为5天4小时3分2秒的cookie，该cookie在整个网站上均有效
let expireDate=new Date(new Date().getTime() + 5*24*60*60*1000 + 4*60*60*1000 + 3*60*1000 + 2*1000)
Cookies.set('name', 'value', { expires: expireDate });




【取值】
Cookies.get('name'); // => 'value'

Cookies.get('nothing'); // => undefined

//获取所有cookie
Cookies.get(); // => { name: 'value' }




【删除值】
Cookies.remove('name');

//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // 删除失败
Cookies.remove('name', { path: '' }); // 删除成功

//注意，删除不存在的cookie不会报错也不会有返回




【存取json】可使用js-cookie自带语法，也可自行使用JSON.stringify()和JSON.parse()处理(注意两种方法不可混用)
自行处理(推荐)：
存储：Cookie.set("books",JSON.stringify(this.booklist))
获取：JSON.parse(Cookie.get("books"))

自带语法：详见官方文档

使用限制

只能存储文本

存储大小限制：单条数据不大于4KB

存储数量限制：一般50条

读取域名限制：不可跨域读取

存储时效限制：每个cookie都有时效，最短的有效期是会话级别（即浏览器关闭时cookie便销毁）