微信小程序缓存如何使用

最近在微信小程序开发过程中使用到了数据缓存,整理出来供大家参考

数据缓存的定义

本地数据缓存是小程序存储在当前设备上硬盘上的数据，本地数据缓存有非常多的用途，我们可以利用本地数据缓存来存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。我们还可以利用本地缓存一些服务端非实时的数据提高小程序获取数据的速度，在特定的场景下可以提高页面的渲染速度，减少用户的等待时间。

业务场景

在列表页面点击拜访时候跳转到了一个新的页面,新页面没有请求后端接口,而是从列表页面带过来的当前点击的这条数据进行展示(整个项目多个地方使用到这种跳转展示方式)

异步缓存

wx.setStorage(Object) 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容

wx.setStorage({
  key:"key",
  data:"value"
})

wx.getStorage(Object) 从本地缓存中异步获取指定 key 对应的内容

wx.getStorage({
  key: 'key',
  success: function(res) {
    console.log(res)
  }
})

wx.getStorageInfo(Object) 异步获取当前storage的相关信息

wx.getStorageInfo({
  success: function(res) {
   console.log(res)
  }
})

wx.removeStorage(Object) 从本地缓存中异步移除指定 key

wx.removeStorage({
  key: 'key',
  success: function(res) {
   console.log(res)
  }
})

wx.clearStorage(Object) 清理本地数据缓存

wx.clearStorage()

同步缓存

wx.setStorageSync(KEY,DATA) 将 data 同步存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容

wx.getStorageSync(KEY) 从本地缓存中同步获取指定 key 对应的内容

wx.getStorageInfoSync 同步获取当前storage的相关信息

wx.removeStorageSync(KEY) 从本地缓存中同步移除指定 key

wx.cleartorageSync() 同步清理本地数据缓存

特别注意

单个 key 允许存储的最大数据长度为1MB，所有数据存储上限为10MB

总结

我们的项目没有使用清理缓存、删除缓存,写这篇文章时候去官方数据缓存章节看了一下,在一个成熟的项目中官方给的缓存限制是足够的,问题在于开发人员的忽略,频繁且过于依赖缓存,一定要做好缓存的清理,删除,避免超出上限缓存失败