强制缓存的使用

强制缓存

上一篇文章讲述了树节点懒加载数据，这里说一下强制缓存的实现，原理可以看看强制缓存与协商缓存：概念原理、区别、适用场景和具体示例
因为数据量大，采用IndexedDB方式进行缓存。

1.安装 idb 库

idb 是一个简化 IndexedDB 使用的库。安装 idb：

npm install idb

2.配置 IndexedDB 服务

在项目的config中配置indexedDB

import { openDB } from 'idb'

const DB_NAME = '***'
const STORE_NAME = '***'
const CACHE_EXPIRY = 7 * 24 * 60 * 60 * 1000 // 缓存有效期，设置为一周，不经常更新的数据，缓存有效期可以设置的长一点

const getDB = async () => {
  return openDB(DB_NAME, 1, {
    upgrade(db) {
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME)
      }
    },
  })
}

const setItem = async (key, value) => {
  try {
    const db = await getDB()
    const data = { value, timestamp: Date.now() }
    await db.put(STORE_NAME, data, key)
    console.log(`存储数据使用的密钥：${key}`)
  } catch (error) {
    console.log('数据存储失败！', error)
  }
}

const getItem = async (key) => {
  try {
    const db = await getDB()
    const data = await db.get(STORE_NAME, key)
    if (data) {
      const isExpired = Date.now() - data.timestamp > CACHE_EXPIRY
      if (isExpired) {
        await deleteItem(key)
        return null
      }
      return data.value
    }
    console.log(`密钥匹配数据：${key}`)
    return null
  } catch (error) {
    console.log(error)
  }
}

const deleteItem = async (key) => {
  try {
    const db = await getDB()
    await db.delete(STORE_NAME, key)
    console.log(`删除密钥：${key}`)
  } catch (error) {
    console.log('删除密钥失败！', error)
  }
}

const clearStore = async () => {
  try {
    const db = await getDB()
    await db.clear(STORE_NAME)
    console.log('清除所有数据成功！')
  } catch (error) {
    console.log('清除所有数据失败！', error)
  }
}

export { openDB, setItem, getItem, deleteItem, clearStore }

3.加载数据时使用缓存

查询数据时，首先根据key查询缓存中是否存在数据，如果存在，则从缓存中获取数据，否则调用接口从后端获取。示例如下：

/**
 * @description: 采用强制缓存将行政区数据缓存
 * @param {*} node
 * @param {*} resolve
 * @return {*}
 */      
const load = async (node, resolve) => {
  // 设置缓存KEY，indexedD会根据key匹配查询数据，这里因为采用的是逐级查询，因此每一个节点对应的key都不一样
  const cacheKey = `${node.level + 1}-${node.id}`
  if (node.level === 0) {
  	// 缓存查询
    const cacheData = await getItem(cacheKey)
    if (cacheData) {
      resolve(cacheData)
    } else {
      // 接口查询
      const { data } = await getAddCd(0)
      resolve(data.children)
      await setItem(cacheKey, data.children)
    }
  } else {
  	// 缓存查询
    const cacheData = await getItem(cacheKey)
    if (cacheData) {
      resolve(cacheData)
    } else {
      const { data } = await getAddCd(node.data.code)
      resolve(data.children)
      await setItem(cacheKey, data.children)
    }
  }
}

如若有建议，欢迎提出，帮助我改进~