Cookie的使用（基于js-cookie插件）

简介：

Cookie 是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成，储存在用户本地终端上。

js-cookie 是一个简单的，轻量级的处理cookies的 js API。

一、安装和引入

1、安装

npm install js-cookie --save

2、引入

import Cookies from 'js-cookie'

二、使用

1、存储 cookie 值

Cookies.set('name', 'value', { 
  expires: 7,
  path: '/',
  domain: '',
  secure: false 
})

name：

cookie 的变量名。

value：

cookie 变量的值。

expires：

设置 cookie 变量保存的时间，单位是天。

path：

cookie 的有效范围，默认为“/”。path 是在参数 domain 基础上的有效范围。

示例：path 设置为 ”/”，在整个 domain 都有效；path 设置为 ”/test”，则只在 domain 下的 /test 目录及子目录才有效。

domain：

cookie有效的域名。

示例：domain 设置为 googlephp.cn，那么在 googlephp.cn 以及它的所有子域都有效。假设php.googlephp.cn、css.googlephp.cn 是 googlephp.cn 的子域，则这2个子域都有效。如果domain 设置为 php.googlephp.cn，则只在子域 php.googlephp.cn下才有效。

secure：

true 或 false，表示 cookie 传输是否仅支持https。默认为 false，不要求协议必须为 https。

2、读取 cookie 值

1）读取指定 name 的 cookie 值

Cookies.get('name') // => 'value'

2）读取 cookie 所有的值

Cookies.get() // => { name: 'value' }

注意：不可以通过传递一个 cookie 属性来读取特定的 cookie。例如：

Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect!

3、删除 cookie 值

Cookies.remove('name')

注意：删除 cookie 时，如果不依赖默认属性，则必须传递与设置 cookie 完全相同的路径和域属性。

Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

三、对 cookie 进行封装

将对 cookie 的存取删封装到 cookies.js 文件。

import Cookies from 'js-cookie'

const cookies = {}
const prefix = process.env.VUE_APP_NAME

/**
 * @description 存储 cookie 值
 * @param {String} name cookie name
 * @param {String} value cookie value
 * @param {Object} setting cookie setting
 */
cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
  let currentCookieSetting = {
    expires: 1
  }
  Object.assign(currentCookieSetting, cookieSetting)
  Cookies.set(`${prefix}-${name}`, value, currentCookieSetting)
}

/**
 * @description 拿到 cookie 值
 * @param {String} name cookie name
 */
cookies.get = function (name = 'default') {
  return Cookies.get(`${prefix}-${name}`)
}

/**
 * @description 拿到 cookie 全部的值
 */
cookies.getAll = function () {
  return Cookies.get()
}

/**
 * @description 删除 cookie
 * @param {String} name cookie name
 */
cookies.remove = function (name = 'default') {
  return Cookies.remove(`${prefix}-${name}`)
}

export default cookies

记录于2022-11-04.