Use of cookies (based on js-cookie plugin)

Introduction:

A cookie is a piece of small text data not exceeding 4KB, which consists of a name (Name), a value (Value) and several other optional attributes used to control the validity period, security, and scope of use of the cookie, and is stored on the user's local terminal .

js-cookie is a simple, lightweight js API for handling cookies .

1. Installation and introduction

1. Installation

npm install js-cookie --save

2. Introduction

import Cookies from 'js-cookie'

Two, use

1. Store the cookie value

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

name：

The variable name for the cookie.

value：

The value of the cookie variable.

expires：

Set the storage time of cookie variable, the unit is day.

path：

The effective range of the cookie, the default is "/". path is a valid range based on the parameter domain.

Example: If the path is set to "/", it is valid in the entire domain; if the path is set to "/test", it is only valid in the /test directory and subdirectories under the domain.

domain：

The domain name for which the cookie is valid.

Example: if the domain is set to googlephp.cn, it will be valid in googlephp.cn and all its subdomains. Assuming that php.googlephp.cn and css.googlephp.cn are subdomains of googlephp.cn, both subdomains are valid. If the domain is set to php.googlephp.cn, it will only be valid under the subdomain php.googlephp.cn.

secure：

true or false, indicating whether the cookie transport only supports https. The default is false, and the protocol is not required to be https.

2. Read the cookie value

1) Read the cookie value of the specified name

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

2) Read all the values of the cookie

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

Note: It is not possible to read specific cookies by passing a cookie attribute. For example:

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

3. Delete the cookie value

Cookies.remove('name')

NOTE: When deleting a cookie, you must pass the exact same path and domain properties as you set the cookie if you are not relying on the default properties.

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

3. Encapsulate the cookie

Encapsulate the access to cookies to the cookies.js file.

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

Recorded on 2022-11-04.