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

Posted 2023-04-05 今天超市大减价

简介：

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.

Cookie的使用（js-cookie插件）

js-cookie 官方文档

里面就详细的介绍了es5怎么引用，以下是ES6以上的用户

一、安装

npm install js-cookie --save

 

二、引用

import Cookies from ‘js-cookie‘

 

三、一般使用
1.存到Cookie去

// Create a cookie, valid across the entire site:
Cookies.set(‘name‘, ‘value‘);

// Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set(‘name‘, ‘value‘, { expires: 7 });

// Create an expiring cookie, valid to the path of the current page:
Cookies.set(‘name‘, ‘value‘, { expires: 7, path: ‘‘ });

 

2.在Cookie中取出

// Read cookie:
Cookies.get(‘name‘); // => ‘value‘
Cookies.get(‘nothing‘); // => undefined

// Read all visible cookies:
Cookies.get(); // => { name: ‘value‘ }

 

3.删除

// Delete cookie:
Cookies.remove(‘name‘);

// Delete a cookie valid to the path of the current page:
Cookies.set(‘name‘, ‘value‘, { path: ‘‘ });
Cookies.remove(‘name‘); // fail!
Cookies.remove(‘name‘, { path: ‘‘ }); // removed!

 

四、特殊使用（在Cookie中存对象）
跟一般使用不同的是，从Cookie中取出的时候，要从字符串转换成json格式：

const user = {
name: ‘lia‘,
age: 18
}
Cookies.set(‘user‘, user)
const liaUser = JSON.parse(Cookies.get(‘user‘))