安装

$ npm i js-cookie --save

或者用cdn引入

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.mjs"
></script>

使用

引入

import Cookies from 'js-cookie'

设置cookie

Cookies.set('name', 'value') // 简单设置，浏览器关闭后消失
Cookies.set('name', { foo: 'bar' }); // 储存对象，自动使用JSON.stringify转换成字符串
Cookies.set('name', 'value', { secure: true }); // 使用https协议创建
// 时效
Cookies.set('name', 'value', { expires: 7 }) //设置保存7天
Cookies.set('name', 'value', { expires: 7, path: '' }) // 设置保存7天，可以设置这个cookie只针对某个页面路径生效
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {  // 保存15分钟
    expires: inFifteenMinutes
});

读取cookie

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
Cookies.get() // => { name: 'value' } // 获取所有cookie
Cookies.getJSON('name'); // => { foo: 'bar' } 根据JSON.parse解析存储在cookie中的字符串的表示的对象

删除cookie

Cookies.remove('name');
// 删除针对某页面生效的cookie，必须针对性删除
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

注意：删除不存在的cookie不会引发任何异常，也不会返回任何值。

封装

可以封装到一个文件里面，

import Cookies from 'js-cookie'
/**
 * 获取所有Cookies
 * @returns Object
 */
export function getAllCookies() {
  return Cookies.get()
}
/**
 * 获取指定的Cookies
 * @param {String} key 
 * @returns String
 */
export function getCookies(key = "") {
  return Cookies.get(key)
}
/**
 * 设置Cookies
 * @param {String} key 设置的键
 * @param {String | Object} value 设置的值，可以是对象，会自动转成JSON
 * @param {Object} option 可选，设置的选项，
 * option 的属性有：
 *   secure - Boolean,使用https协议创建
 *   expires - Number, 保存天数，可以通过var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000) 保存分钟数
 *   path - String,只针对某个路径有效
 * @returns 
 */
export function setCookies(key = "", value = "", option = {}) {
  if (JSON.stringify(data) == "{}") {
    return Cookies.set(key, value)
  } else {
    Cookies.set(key, value, option)
  }
}