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

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

发布于 2018-05-22 字数 2502 浏览 11386 评论 1

微信给我们提供了类似于 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,如果设置了就判断时间差。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

灵芸 2018-05-23 1 楼

可以直接添加一个更新缓存或者下拉更新的功能。

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3