微信小程序wx.setStorage数据缓存实现缓存过期时间

2018-01-23 16:36 栏目:技术开发 查看(12419)

为了项目性能等方面的考虑,有时候有必要为用户经常访问的页面使用缓存机制;在技术上,服务端和前端都有相应的缓存机制。比如传统的session及cookie等等,在微信小程序中,并没有cookie机制,但有本地缓存。小程序官方文档对本地缓存的介绍如下:

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。其中 localStorage 是持久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况。

上面一句翻译成简洁的人话就是:本地缓存localStorage存在于客户端中,不同用户所对应的缓存数据是相互独立并且因设备而隔离的,而且是持久存储(除非用户清空该小程序的数据)。

在项目开发过程中,我们利用缓存机制的时候,一般的都需要设置一个过期时间,而不管是session还是cookie我们除了可以设置、获取和清理缓存外,我们可以在设置缓存的同时设置一个“过期时间”。而从以上小程序关于数据缓存API的介绍中,我们并没有看到关于数据缓存过期时间设置的API。

那么这样似乎对于很多需要使用到缓存机制的场景留下遗憾,以我们微构网络官方小程序为例,首页的几乎所有的数据全部是通过服务端API提供的数据,如果每次刷新小程序页面都需要重新通过wx.request这个接口拉取数据,那么花在网络请求的时间至少是100ms以上,这不仅不利于用户体验也浪费了计算资源。而如果,直接按照文档中的表面化的应用数据缓存API,那么数据会持久化存储,那么首页中包括案例以及其他动态更新的数据怎么更新?

2424

 

那么是不是就必须留下这样的遗憾呢?如果果然会留下这样的遗憾,那么我相信腾讯肯定会解决这样的问题的。其实我们可以参考诸如cookie这样的缓存机制,我们自己“造”一个过期时间。在设置某缓存数据A的时候,我们可以同时设置一个过期时间值的数据缓存B;在下一次打开该页面的时候,不仅需要判断数据A是否存在,也需要比较B与当前时间,如果符合要求则使用本地缓存的数据A,否则则重新拉取数据并刷新A和B。以上逻辑翻译成代码则为如下,首先是拉取服务端数据成功后同时设置两个数据缓存,

2532

以上的index_data是我们需要设置的缓存数据,而index_data_expiration则是与之对应的时间数据,其中3000000则是3000s,当用户进入该页面时,进行缓存数据判断:

23424

在项目实践过程中,我们可以根据以上逻辑把这种方法封装起来;此外,缓存的过期时间,我们也可以读取服务端设置的超时时间,这样小程序发布后我们可以在服务端灵活变更调节具体的数值了。如果你有程序小程序开发制作需求,可以联系我们哟,微构网络专业提供微信小程序开发服务。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:微信小程序wx.setStorage数据缓存实现缓存过期时间 - 微构网络
分享: