小程序模板网

微信小程序--二次封装的缓存框架 wCache(支持缓存时间、默认值) ...

发布时间:2017-12-12 17:23 所属栏目:小程序开发教程

开发客户端时常会用到一些非永久缓存的需求,而微信缓存只能按key永久缓存;其次,当读取缓存失败时,有时需要给个默认值,所以得二次判断下,今天想了一下何不封装一个缓存框架。 ...

 
 
 

一、前言

 

开发客户端时常会用到一些非永久缓存的需求,而微信缓存只能按key永久缓存;其次,当读取缓存失败时,有时需要给个默认值,所以得二次判断下,今天想了一下何不封装一个缓存框架。

 

二、支持方法

 

put(k, v, t)

k为key,v为具体内容(支持字符串、json、数组、boolean等等),t为可选参数表示有效时间(单位:秒)

如存储k为123过期时间1秒,则调用put('k', '123', 1)方法;若永久存储调用put('k', '123')

永久保存json:put('k', {"a":"1"}),数组、boolean等同理。

get(k, def)

k为key,def为可选参数,表示无缓存数据时返回值(支持字符串、json、数组、boolean等等)

如读取k缓存,则调用get('k');若想要无缓存时,返回默认值则get('k','默认值'),支持各个数据类型。

remove(k)

移除某个key

clear()

清空所有key

其他方法

使用wx原生的即可。

 

三、框架讲解

 

 

		
  1. put(k, v, t)
  2.  
  3. function put(k, v, t) {
  4. // console.log(k);
  5. wx.setStorageSync(k, v)
  6. var seconds = parseInt(t);
  7. if (seconds > 0) {
  8. var timestamp = Date.parse(new Date());
  9. timestamp = timestamp / 1000 + seconds;
  10. // console.log(timestamp);
  11. wx.setStorageSync(k + postfix, timestamp + "")
  12. } else {
  13. wx.removeStorageSync(k + postfix)
  14. }
  15. }

先存储key的数据(字符串、数组、json),再判断过期时间是否大于0,当大于0时,存储key+一个后缀,内容为当前时间戳(单位秒)+有效时间t。

get(k, def)

 

		
  1. function get(k, def) {
  2. var deadtime = parseInt(wx.getStorageSync(k + postfix))
  3. if (deadtime) {
  4. if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
  5. if (def) { return def; } else { return; }
  6. }
  7. }
  8. var res = wx.getStorageSync(k);
  9. if (res) {
  10. return res;
  11. } else {
  12. return def;
  13. }
  14. }

get方法,先通过key+一个后缀得到时间戳,如果时间戳存在,切小于当前时间,说明过期;【那么,当有默认值时返回默认值(包含字符串、数组、json),否则返回空。】当没过期时,正常读取key的内容,key存在时正常返回;否则返回默认值,当不存在默认值时返回空。

其他方法

 

		
  1. function remove(k) {
  2. wx.removeStorageSync(k);
  3. wx.removeStorageSync(k + postfix);
  4. }
  5.  
  6. function clear() {
  7. wx.clearStorageSync();
  8. }

remove(k)需要移除2个key,因为存储的时候,可能存了时间戳,当然即使不存在key,移除也是不会报错的。

 

四、如何使用

 

下载src文件夹内wCache.js文件  需要使用的js文件头加入var wc = require('../../src/wcache.js')。  var s=wc.get('k', '你好')、wc.put('k', 'string你好啊')等;  使用例子

 

		
  1. get(e) {
  2. this.setData({
  3. text: null
  4. });
  5. switch (e.currentTarget.dataset.type) {
  6. case "def":
  7. this.setData({
  8. text: wc.get('k')
  9. });
  10. break;
  11. case "string":
  12. this.setData({
  13. text: wc.get('k', '你好')
  14. });
  15. break;
  16. case "json":
  17. this.setData({
  18. text: wc.get('k', { "a": "1" })
  19. });
  20. break;
  21. }
  22.  
  23. }
  24. put(e) {
  25. console.log(e);
  26. switch (e.currentTarget.dataset.type) {
  27. case "string":
  28. wc.put('k', 'string你好啊');
  29. break;
  30. case "json":
  31. wc.put('k', { "b": "3" }, 2);
  32. break;
  33. case "list":
  34. wc.put('k', [1, 2, 3]);
  35. break;
  36. case "boolean":
  37. wc.put('k', true);
  38. break;
  39. }
  40. wx.showToast({
  41. title: '存储成功',
  42. duration: 500,
  43. })
  44. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18134.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询