简单封装浏览器 cookie 工具类

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82655713 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82655713

简单封装浏览器 cookie 工具类

目前主流浏览器一般都支持 cookie ,以下对 cookie 的操作进行简单封装,以方便使用

更多精彩

主体封装类

import { storagePrefix } from 'assets/scripts/config/config'
import { verify, uri } from 'assets/scripts/tools'

/**
 * cookies操作类
 */
export default new class Cookie {
  /**
   * 构造函数
   */
  constructor() {
    this.defaults = {}
    this.expiresMultiplier = 60 * 60 * 24
    this.prefix = storagePrefix
  }

  /**
   * 根据key获取cookie的值
   * @param {string} key 键
   * @returns {object} 值
   */
  get(key) {
    if (!key) {
      throw new Error('没有找到key。')
    }
    if (typeof key === 'object') {
      throw new Error('key不能是一个对象。')
    }
    let cookies = this.all()
    let value = cookies[this.prefix + key]

    try {
      value = JSON.parse(value)
    } catch (e) {
      value = {}
    }
    return value
  }

  /**
   * 设置cookies
   * @param key 键
   * @param value 值
   * @param options 选项
   * @returns {Cookie}
   */
  set(key, value, options) {
    options = verify.isObject(options) ? options : {expires: options}
    let expires = options.expires !== undefined ? options.expires : (this.defaults.expires || '')
    let expiresType = typeof (expires)
    if (expiresType === 'string' && expires !== '') {
      expires = new Date(expires)
    } else if (expiresType === 'number') {
      expires = new Date(+new Date() + 1000 * this.expiresMultiplier * expires)
    }
    if (expires !== '' && 'toGMTString' in expires) {
      expires = ';expires=' + expires.toGMTString()
    }
    let path = options.path || this.defaults.path
    path = path ? ';path=' + path : ''
    let domain = options.domain || this.defaults.domain
    domain = domain ? ';domain=' + domain : ''
    let secure = options.secure || this.defaults.secure ? ';secure' : ''
    if (options.secure === false) secure = ''
    document.cookie = uri.encode(this.prefix + key) + '=' + uri.encode(JSON.stringify(value)) + expires + path + domain + secure
    return this
  }

  /**
   * 删除cookie
   * @param {string||array} keys 删除cookie的key
   * @returns {Cookie}
   */
  remove(keys) {
    keys = verify.isArray(keys) ? keys : [keys]
    for (let i = 0, l = keys.length; i < l; i++) {
      this.set(keys[i], '', -1)
    }
    return this
  }

  /**
   * 获取所有的cookie
   * @returns {object} cookie对象
   */
  all() {
    let cookie = document.cookie
    if (cookie === '') return {}
    let cookieArr = cookie.split('; ')
    let result = {}
    for (let i = 0, l = cookieArr.length; i < l; i++) {
      let item = cookieArr[i].split('=')
      let key = uri.decode(item.shift())
      let value = uri.decode(item.join(''))
      result[key] = value
    }
    return result
  }
}

verify 工具类

export default new class Verify {
  // 验证url是否正确,true/false
  isUrl (url) {
    return (/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/i).test(url)
  }

  // 验证手机号码是否正确, true/false
  isTel (tel) {
    return (/^1[3|4|5|8][0-9]\d{4,8}$/).test(tel)
  }

  // 判断是否是object对象
  isObject (value) {
    return !!value && Object.prototype.toString.call(value) === '[object Object]'
  }

  // 判断是否是数组
  isArray (value) {
    return Object.prototype.toString.call(value) === '[object Array]'
  }
}

uri 工具类

export default new class Uri {
  decode (value) {
    return decodeURIComponent(value)
  }

  encode (value) {
    return encodeURIComponent(value)
  }
}

config 基础配置

// 本地存储的前缀
export const storagePrefix = 'tshark_quick_storage_'
目录
相关文章
|
存储 搜索推荐 数据挖掘
使用selenium库模拟浏览器行为,获取网页的cookie值
使用selenium库模拟浏览器行为,获取网页的cookie值
|
3天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
6月前
|
存储 搜索推荐 安全
Cookie 探秘:了解 Web 浏览器中的小甜饼
Cookie 探秘:了解 Web 浏览器中的小甜饼
|
2月前
|
存储 编解码 JSON
解决浏览器存储问题,不得不了解的cookie、localStorage和sessionStorage
该文章详细对比了浏览器存储机制中的cookie、localStorage和sessionStorage的不同之处,以及各自的适用场景。
|
3月前
|
存储
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
|
4月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
194 0
|
6月前
|
存储 缓存
浏览器缓存sessionStorage、localStorage、Cookie
浏览器缓存sessionStorage、localStorage、Cookie
76 1
|
6月前
|
人工智能 搜索推荐 安全
实用浏览器和文档工具类网站推荐
本文介绍了几个令人惊叹的浏览器和宝藏级网站,提升上网体验。谷歌浏览器以其简洁和高性能受到青睐,火狐浏览器则以其定制化和同步功能吸引用户,Edge则凭借改进的用户体验赢得好评。在网站推荐方面,Pixlr和IloveIMG提供在线图像处理服务,Coverview和EasyCover帮助创建专业封面,Convertio支持多种文件格式转换,极简壁纸和WallRoom提供高质量壁纸资源,而Amymind和Excalidraw是两款实用的在线画板工具。这些工具旨在使用户在浏览网页、处理文档和图像时更加高效和愉快。
|
6月前
|
Web App开发
允许浏览器cookie策略处理
允许浏览器cookie策略处理
50 0
|
Web App开发
【cookie处理】79chrome浏览器 -允许浏览器cookie策略处理
【cookie处理】79chrome浏览器 -允许浏览器cookie策略处理