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

简介：

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

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

一、安装和引入

安装

npm install js-cookie --save

引入

import Cookies from 'js-cookie'

二、使用

存储 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。

读取 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!

删除 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_NAMEcookies.set = function (name = 'default', value = '', cookieSetting = {}) {  let currentCookieSetting = {    expires: 1  }  Object.assign(currentCookieSetting, cookieSetting)  Cookies.set(`${prefix}-${name}`, value, currentCookieSetting)}cookies.get = function (name = 'default') {  return Cookies.get(`${prefix}-${name}`)}cookies.getAll = function () {  return Cookies.get()}cookies.remove = function (name = 'default') {  return Cookies.remove(`${prefix}-${name}`)}export default cookies

记录于2022-11-04.

来源地址：https://blog.csdn.net/qq_40146789/article/details/127691041