原生js设置与获取cookie

原生 js 设置与获取 cookie

设置 cookie

• 先上代码

/**
 * 设置cookie
 *
 * @export
 * @param {string} name cookie名称
 * @param {string} value cookie值
 * @param {number} [days=7] 过期时间（天）
 * @param {string} [path='/'] cookie路径
 * @param {string} [domain] cookie domain
 */
const setCookie = (name, value, days, path, domain) => {
  days = days || 1
  path = path || '/'
  const expires = new Date(Date.now() + days * 864e5).toUTCString()
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires}${
    domain ? `;domain=${domain}` : ''
  };path=${path}`
}

注意： 对于参数value，一定要使用encodeURIComponent进行 URI 编码。因为对于 cookie 来说;分号是个特殊字符，所以如果存入的字符串中含有分号，那么是存不上该 cookie 的。

• 使用示范

// 简单类型
setCookie('demo', 'xxxxx', 30)

// 复杂类型
const obj = { a: 'xxxxx' }
setCookie('demo', JSON.stringify(obj)) // 注意这里对于复杂类型，一定要转成JSON字符串，否则存入cookie的就是[object Object]

获取 cookie

• 先上代码

/**
 * 获取cookie
 *
 * @export
 * @param {*} name cookie名称
 * @returns
 */
const getCookie = (name) => {
  const value = `; ${document.cookie}`
  const parts = value.split(`; ${name}=`)
  if (parts.length === 2) {
    return decodeURIComponent(parts.pop().split(';').shift())
  } else {
    return null
  }
}

注意： 由于在存入 cookie 函数中使用了encodeURIComponent编码，所以在取 cookie 时也需要decodeURIComponent进行解码。

• 使用示范

// 简单类型
setCookie('demo', 'xxxxx', 30) // 存
let str = getCookie('demo') // 取
console.log(str) // 'xxxxx'

// 复杂类型
const obj = { a: 'xxxxx' }
setCookie('demo', JSON.stringify(obj)) // 存
let objFromCookie = getCookie('demo') // 取
console.log(JSON.parse(objFromCookie)) // { a: 'xxxxx' }

删除 cookie

/**
 * 删除cookie
 *
 * @export
 * @param {*} name cookie名称
 */
const deleteCookie = (name) => {
  document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'
}