前端缓存通用方法实例

知识点

前端通用的浏览器缓存有cookies localStorage 和 sessionStorage。

1. cookies的限制
数量限制1:IE6每个域名限制20个Cookies,IE7以上每个域名限制50
数量限制2:Safari和chrome没有数量限制,Opera限制30个。

容量限制: 发向服务器的所有 cookie 的最大数量(空间)仍旧维持原始规范中所指出的:4KB。所有超出该限制的 cookie 都会被截掉并且不会发送至服务器。

2. localStorage和sessionStorage的特点
容量限制:5M。
另外的区别就是基本使用,不再赘述。

需求

  • 找一个合适的Cookies库来方便操作
  • 用一个通用的方法来实现方便的三种缓存读写

cookies库

这里我使用的是 js-cookie ,API使用起来比较方便。
https://github.com/js-cookie/js-cookie

需要注意的地方

localStorage和sessionStorage在存取对象的时候,需要以字符串作为中转。

读取分成两个方法的示例

// 以下代码只是思路

// 获取
export function $getCache(keyName, cacheType = 'sessionStorage') {
    let value = ''
    if (cacheType === 'cookies') {
        value = Cookies.get(keyName)
    } else if (cacheType === 'localStorage') {
        value = localStorage.getItem(keyName)
    } else if (cacheType === 'sessionStorage') {
        value = sessionStorage.getItem(keyName)
    }
    return value
}


// 设置
export function $setCache(keyName, value, cacheType = 'sessionStorage') {
    if (cacheType === 'cookies') {
        Cookies.set(keyName, value)
    } else if (cacheType === 'localStorage') {
        localStorage.setItem(keyName, value)
    } else if (cacheType === 'sessionStorage') {
        sessionStorage.setItem(keyName, value)
    }
}

 

补充一种读写合并为一个方法的示例

// 思路是判断参数数量 一个的话就是读 两个的话就是写
// 以下代码只是思路 有一些方法需要额外定义

// localStorage
Vue.prototype.$localStorage = function (keyName, value) {
  if (arguments.length === 1) { // 获取
    let getValue = localStorage.getItem(keyName)
    let parseValue = JSON.parse(getValue)
    let result = ''
    if (_isObject(parseValue)) {
      result = parseValue
    } else {
      result = getValue
    }
    return result
  } else if (arguments.length === 2) { // 设置
    if (_isObject(value)) {
      localStorage.setItem(keyName, JSON.stringify(value))
    } else {
      localStorage.setItem(keyName, value)
    }
  }
}
分享