微信小程序 wx.setStorageSync 本地储存缓存过期时间

  • Z时代
  • 2024-01-10
  • 分类：IT

微信给我们提供了类似于 Cookie 或者 Session 的缓存机制，通过这个本地缓存，我们可以实现很多功能，而且没有 Cookie 或者 Session 那么多限制。

微信小程序 wx.setStorageSync 本地储存缓存过期时间

微信小程序本地缓存

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。

同一个微信用户，同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。其中 localStorage 是持久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。

通俗点将就是：本地缓存 localStorage 存在于客户端中，不同用户所对应的缓存数据是相互独立并且因设备而隔离的，而且是持久存储（除非用户清空该小程序的数据）。

过期时间

任何一种缓存都存在过期时间，只不过微信默认的机制是设置了无限长的过期时限，但是对于我们的应用开发中，这确是一个致命的缺陷。

例如我们有一个新闻列表，为了更快的响应用户的请求，更快的加载页面，我们一般把列表缓存到本地，默认情况下如果本地有缓存，我们就不会重新请求 API，但是我们的新闻不可能不更新，更新后的内容就不会显示在小程序中。

其实我们可以参考诸如 Cookie 这样的缓存机制，我们自己创建一个过期时间。在设置某缓存数据 A 的时候，我们可以同时设置一个过期时间值的数据缓存 B，在下一次打开该页面的时候，不仅需要判断数据 A 是否存在，也需要比较 B 与当前时间，如果符合要求则使用本地缓存的数据 A，否则则重新拉取数据并刷新 A 和 B。

以上逻辑翻译成代码则为如下，首先是拉取服务端数据成功后同时设置两个数据缓存，其中 1800000 则是 1800s，当用户进入该页面时，进行缓存数据判断：

var timestamp = Date.parse(new Date());
var expiration = timestamp + 1800000; //缓存30分钟
var data_expiration = wx.getStorageSync("data_expiration");
if (data_expiration) {
  if (timestamp > data_expiration) {
    wx.clearStorageSync()
    wx.setStorageSync("data_expiration", expiration)
  }
} else {
  wx.setStorageSync("data_expiration", expiration)
}

首先获取当前的时间戳 timestamp，将其加一个缓存的时间，这里设置为 30 分钟，第二次进入页面的以当前的时间戳和缓存的时间戳比对，如果当前时间戳大于缓存的时间戳，就清除缓存并设置新的缓存过期时间。

wx.getStorageSync() 方法是获取本地缓存，如果没有这只或者为空，则返回 False，所以我们先用 If 判断是否设置了缓存时间 data_expiration，如果设置了就判断时间差。

以上是 微信小程序 wx.setStorageSync 本地储存缓存过期时间 的全部内容， 来源链接： utcz.com/p/231862.html

回到顶部