微信H5缓存详解

一、微信H5缓存策略

微信H5缓存是指根据业务特点和缓存策略，将H5页面的静态资源缓存到本地，实现快速加载，提升用户体验的一种技术方案。微信H5缓存具有以下特点：

1、 静态资源包含HTML、CSS、JS、图片等，缓存时间长达30天，提供强缓存和协商缓存两种缓存方式。

2、通过manifest.json文件进行配置，支持多个页面的缓存。

3、使用localStorage进行本地存储。

{
  "version": "1.0.0",
  "pages": [
    {
      "path": "pages/index/index",
      "query": {},
      "relative": true
    },
    {
      "path": "pages/detail/detail",
      "query": {},
      "relative": true
    }
  ],
  "network": {
    "*": {
      "requiredNetworkType": ["wifi"]
    }
  }
}

上面的代码是一个manifest.json文件的示例。版本号（1.0.0)和页面的路径表示需要缓存的版本号和页面。network中的*表示不缓存任何资源，不过在没有网络的情况下，本地资源仍然能够访问。

使用微信H5缓存时需要注意以下几点：

1、动态资源不应该缓存，以免影响业务功能和数据实效性。

2、缓存的路径需要与实际路径匹配，否则会导致缓存失效。

3、若缓存包含敏感数据，需要进行加密处理。

二、微信H5清除缓存

微信H5缓存清除可以通过两种方式进行，一种是手动清除缓存，另一种是自动清除缓存。

手动清除缓存可以通过微信进入设置 - 存储空间管理 - 微信 ，在微信栏目下选择清空缓存即可。

自动清除缓存是指微信会自动删除一些长时间未访问的缓存文件，具体实现方法是按照LIFO（后进先出）原则进行清理。

三、微信H5缓存清理

由于微信H5缓存清除是按照LIFO原则进行清理的，因此在特殊情况下，会导致缓存太严重。此时需要手动清理缓存文件。

手动清理缓存文件需要了解缓存文件的存储路径，删除时需要注意删除文件的路径与缓存中存储的路径相匹配，否则会导致数据丢失。

// 获取缓存文件列表
wx.getSavedFileList({
  success: function (res) {
    if (res.fileList.length > 0) {
      for (let i in res.fileList) {
        let filePath = res.fileList[i].filePath;
        // 删除指定文件
        wx.removeSavedFile({
          filePath: filePath,
          complete: function (res) {
            console.log(res)
          }
        })
      }
    }
  }
})

上述代码是删除缓存文件的示例。

四、微信缓存15

微信限制了最多保存15MB的缓存文件大小，因此对于需要缓存的静态资源需进行合理的管理和清理，避免超出缓存大小限制。需清理掉一些不必要的缓存文件，保证业务正常使用。

五、微信H5页面缓存清除

在使用微信H5缓存时，有时需要清除某个页面的缓存。此时需要使用wx.removeSavedFile()方法对特定的缓存文件进行删除。

// 判断文件是否存在
wx.getSavedFileList({
  success: function (res) {
    for (let i in res.fileList) {
      if (res.fileList[i].filePath.indexOf('/pages/index/index.html') >= 0) {
        // 删除指定文件
        wx.removeSavedFile({
          filePath: res.fileList[i].filePath,
          complete: function (res) {
            console.log(res)
          }
        })
      }
    }
  }
})

上述代码是清理指定页面缓存的示例。

六、总结

通过本文的介绍，我们了解了微信H5缓存的具体策略以及清除方法，并针对缓存过重的问题提出了解决方案。在实际开发过程中，需要合理使用微信H5缓存，避免对业务造成影响。