localforage缓存文件规定适用区别

一 动因

在目前项目实施中，会有很多插口反复调用的状况，造成不必要能源消耗。同组讨论后，准备在前面加上数据缓存

二 环境

前面常见的缓存文件分成同歩缓存文件和多线程缓存文件。常见的缓存文件方法有localStorage、sessionStorage、cookie、indexedDB、service Worker

storage缓存文件

简单缓存文件方法有cookie，localStorage、sessionStorage，但较大存储量仅有5MB，假如缓存文件的信息过多时，很容易出现内存泄漏

前面数据库系统

前面数据库系统有WebSql和IndexDB，在其中WebSql被标准废旧，他们有大概50MB的最大容量，可以理解为localStorage的增强版

indexDB兼容模式

indexDB优点和缺点

优势

1. 多线程缓存文件，能够多线程读取数据，回到promise
2. 存储量50MB，能够满足插口缓存文件规定
3. 兼容模式优良
4. 还支持存储对象、二维数组等基本数据类型
5. 存放数据时不需要进行数据信息实例化

缺陷

1. 多线程缓存文件，数据信息必须在.then中获得
2. 不一样电脑浏览器中indexDB版本号有多元化

解决方法

应用localforage软件，处理indexDB兼容性问题，同时支持雅致降权，在没有适用indexDB的情形下，会用localStorage存放

运用缓存文件

电脑浏览器端常见的运用缓存文件有service worker

完成基本原理

1. 后台线程：不同于现阶段网页页面进程
2. 代理服务器：在网页页面进行要求时代理商，来缓存

兼容模式

成熟情况

1. 淘宝网
2. 新浪新闻
3. 网易考拉

适用范围

sw 都是基于 HTTPS 的，由于Service Worker所涉及到的到要求阻拦，因此必须采用HTTPS协议书来确保安全。假如是当地调节得话，localhost是没问题的。

三 技术选择

方案对比

1. service worker一般用于脚本制作、图片种子等各大网络资源缓存文件，现阶段做的前面缓存文件主要是用来web电脑浏览器插口数据缓存，用localforage比较适合现阶段的情景
2. service worker必须要先进行申请，包括好几个生命期，应用较为复杂，localforage关键所使用的api包括三个，setItem, getItem, removeItem

综上所述，最终选择localforage开展数据缓存

缓存文件规定

1. 适用区别不一样用户接口缓存文件
2. 要求某一插口，适用遮盖更新缓存和清除非是用户状态的该插口缓存文件
3. 调用接口时，先分辨缓存文件，无特定缓存文件才请求接口

完成构思

封装形式request方式

二次封装request请求方法 generateDataCache方式，适用是不是缓存文件，缓存文件时间操作

import request from "@/utils/request"
import {
 getCacheItem,
 generateReqKey,
 setCacheItem,
 getNowTime,
 cleanCacheItem
} from "../commonFuns"

/**
 * 要求阻拦
 * @param config
 * @returns {Promise<*>}
 */
export async function requestInterceptor(config) {
 // 打开缓存文件则储存要求结论
 if (config.cache) {
  let data = await getCacheItem(generateReqKey(config))
  // 纪录缓存文件时长
  let setExpireTime
  if (config.setExpireTime) {
   setExpireTime = config.setExpireTime
   }

  // 分辨缓存文件存不存在 存有得话 是不是到期 没到期就回到
  if (data && getNowTime() - data.expire < setExpireTime) {
   return data.data
   }
  }
}

/**
 * 回应阻拦
 * @param config
 * @param res
 */
export function responseInterceptor(config, res) {
 // 返回code === 200 情况下才能缓存文件出来
 if (config && config.cache && res.code === 20000) {
  let data = {expire: getNowTime(), data: res}
  let key = generateReqKey(config)
  setCacheItem(key, data)
  // todo:清除非是用户状态的同样接口数据信息
  cleanCacheItem(config)
  }
}

/**
 * 形成缓存文件
 * @param {Object} requestConfig 要求数据配置
 * @returns {Promise<unknown>}
 */
export async function generateDataCache(requestConfig) {
 let cacheData = await requestInterceptor(requestConfig)
 // 有缓存文件，但未到期，直接走缓存文件
 if (cacheData) {
  return cacheData
  }
 let res = await request(requestConfig)
 // 缓存文件
 responseInterceptor(requestConfig, res)
 // 回到接口数据
 return res
}

启用缓存文件方式

export function getArticle(data) {
 return generateDataCache({
  url: '/article/list',
  method: 'get',
  params: data,
  cache: true,
  setExpireTime: 300000
  })
}

实体类方式

公共类方式抽身

依靠网络资源

1. localforage软件 [indexDB封装形式软件]
2. Qs软件 [ 将目标或是二维数组编码序列化为 URL 格式(a=b&c=d),形成唯一key]

# 若localforage安装不成功，能直接引进min.js资源文件
npm i localforage Qs -save

四 参考链接

1. service worker使用方法
2. localforage官方网站