网络资源的缓存

核心方案

  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 // 清除低于当前优先级的数据}