项目中资源缓存机制实践（静态资源和本地数据缓存）

网络资源的缓存

核心方案

1. HTML文件 no-cache
2. js,css文件 时间戳/哈希/版本号，长缓存
3. 图片资源 长缓存，更新时使用新连接地址

1. 先后端未分离，且未引入构建工具的项目

方案：每次上线时，维护一个版本记录，由后端给每一个页面上提供当前的版本号，前端在引用js和css时将版本号放在资源的query参数中。

例如：

原先：
<script src="/static/js/utils.js"></script>
<script src="/static/js/index.js"></script>

改后：
// 每次发版维护的版本号
const version = '2.2';
// 动态填写js引用
document.write("<script type='text/javascript' src=./utils.js?version="+ version + "><\/script>");

2. 使用构建工具的项目

方案：使用webpack和grunt之类的工具，每次发版时使用工具使用hash更新静态资源的版本

例如：

<script src="/static/js/0.2e29befc85b7d79378f4.js"></script>

本地缓存的管理

cookie、localStorage、sessionStorage、IndexDB、App cache、service worker

使用本地存储的注意点：

1. 使用要有节制，同一个域名下共享localstorage空间，若是一个域名下的业务很是多，极可能存储量超过限制。像咱们的不一样业务域名时projectA.XXX.com, projectB.XXX.com 而不是www.XXX.com/projectA, www.XXX.com/projectB。使用子域名能够分离storage空间，互不干扰。
2. 使用要有降级方案，不能彻底依赖storge完成业务功能。若是storage读写失败，使用备用方案。
3. 使用时要有版本管理。storage中储存的key也要有版本管理，便于迭代时避免不一样版本之间数据冲突。 V1.0.0_XXXX

下面写了一个用于本地存取的工具，项目中使用时能够将工具绑定到全局空间中使用。例如在Vue生态中，能够结合Vux一块儿使用

const namespace = 'matchu'
const version = '2.2'

function setLocal(key, value, priority) {
  try {
    // 设置的优先级不合法，为非数字时,使用最低优先级0
    priority = /^[0-9]\d*$/.test(priority) ? priority : 0
    localStorage.setItem(`${namespace}_V:${version}_P:${priority}`, JSON.stringify(value))
    return getLocal(key)
  } catch (err) {
    if (/exceeded the quota/.test(err)) {
      // 存储超出限额, 清除低优先级的数据
      clearLowPriorityLocal(priority)
    }
  }
}

function getLocal(key, value) {
  try {
    let result = localStorage.getItem(key)
    // 读取成功当即返回值
    // 读取失败则尝试先存储数据，再返回已存入的数据
    result = result ? JSON.parse(result) : setLocal(key, value)
    return result
  } catch (err) {
    // 读取失败
    console.log(err)
  }
}

// 删除指定key数据
function removeLocal(key) {
  try {
    localStorage.removeItem(key)
  } catch (err) {
    // 清除全部数据失败
    console.log(err)
  }
}

// 删除全部数据
function clearAllLocal() {
  try {
    localStorage.clear()
  } catch (err) {
    // 清除全部数据失败
    console.log(err)
  }
}

// 正则匹配删除当前命名空间且非当前版本的数据
function clearOtherVersionLocal() {
  try {
    const reg = new RegExp(`^${namespace}_V:(?!${version})`)
    Object.keys(localStorage).forEach(key => {
      if (reg.test(key)) {
        removeLocal(key)
      }
    })
  } catch (err) {
    console.log(err)
  }
}

// 正则匹配删除低于当前优先级的数据
function clearLowPriorityLocal(priority) {
  try {
    const reg = new RegExp(`[^${namespace}_V:${version}_P:]`)
    Object.keys(localStorage).forEach(key => {
      const index = key.match(reg).index
      if (index && key.slice(index) < priority) {
        removeLocal(key)
      }
    })
  } catch (err) {
    console.log(err)
  }
}
export default {
  setLocal: setLocal, // 存storage数据
  getLocal: getLocal, // 取storage
  removeLocal: removeLocal, //删除指定key的数据
  clearAllLocal: clearAllLocal, // 删除所有数据
  clearOtherVersionLocal: clearOtherVersionLocal, // 清除非本次版本的数据
  clearLowPriorityLocal: clearLowPriorityLocal // 清除低于当前优先级的数据
}