欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

2018年08月09日 10:46:53 kevin_xingka 阅读数:2043                
 版权声明:博主微信号:hckj0728 https://blog.csdn.net/kevin_xingka/article/details/81532144

在微信小程序中,并没有cookie机制,只有本地缓存功能。

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。

注意: 如果用户储存空间不足,我们会清空最近最久未使用的小程序的本地缓存。我们不建议将关键信息全部存在 localStorage,以防储存空间不足或用户换设备的情况。(官方传送门

由此可以看出,小程序的缓存除非是用官方清空缓存或者一些不确定因素清空缓存,不然缓存会永久存在,这对有些缓存数据需要时效性带来麻烦了。

我的解决方法是在对数据进行缓存的时候,顺便把当前时间也进行缓存,而在取数据的时候先要对缓存时间与现在时间相比,看是否是在自己需要时效时间内,如果在时效时间内则取缓存数据;否则更新数据。

  1. export const getWYResourcesList = () => {


  2. return new Promise((resolve, reject) => {

  3. let App = getApp()



  4. let timestamp = Date.parse(new Date());


  5. let resourcesList = getStorage('resourcesList');


  6. let timestampCache = getStorage('resourcesListCache');


  7. if ((timestamp - timestampCache) > cacheTime) {


  8. console.log('过期了');


  9. resourcesList = '';


  10. }


  11. if (resourcesList) {


  12. resolve(resourcesList)


  13. } else {


  14. wx.showLoading()


  15. ajax({


  16. url: '/api/admin/resources/create',


  17. headers: headers(1)


  18. }).then(res => {


  19. wx.hideLoading()


  20. resolve(res.result)


  21. setStorage('resourcesList', res.result);


  22. setStorage('resourcesListCache', timestamp)


  23. }).catch(e => {


  24. reject(e)


  25. })


  26. }


  27. })


  28. }
               image.png

这是实现缓存时效性的代码段,仅供参考。

来自  https://blog.csdn.net/kevin_xingka/article/details/81532144                



为了项目性能等方面的考虑,有时候有必要为用户经常访问的页面使用缓存机制;在技术上,服务端和前端都有相应的缓存机制。比如传统的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

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

来自 https://www.csweigou.com/article/2143.html

普通分类: