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

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

湖南幸运赛车爱彩人彩票网 www.schu9.cn 为了项目性能等方面的考虑,有时候有必要为用户经常访问的页面使用缓存机制;在技术上,服务端和前端都有相应的缓存机制。比如传统的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数据缓存实现缓存过期时间 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 700| 38| 393| 55| 337| 300| 94| 257| 399| 719|