小程序模板網(wǎng)

微信小程序--二次封裝的緩存框架 wCache(支持緩存時(shí)間、默認(rèn)值) ...

發(fā)布時(shí)間:2017-12-12 17:23 所屬欄目:小程序開發(fā)教程

開發(fā)客戶端時(shí)常會(huì)用到一些非永久緩存的需求,而微信緩存只能按key永久緩存;其次,當(dāng)讀取緩存失敗時(shí),有時(shí)需要給個(gè)默認(rèn)值,所以得二次判斷下,今天想了一下何不封裝一個(gè)緩存框架。 ...

 
 
 

一、前言

 

開發(fā)客戶端時(shí)常會(huì)用到一些非永久緩存的需求,而微信緩存只能按key永久緩存;其次,當(dāng)讀取緩存失敗時(shí),有時(shí)需要給個(gè)默認(rèn)值,所以得二次判斷下,今天想了一下何不封裝一個(gè)緩存框架。

 

二、支持方法

 

put(k, v, t)

k為key,v為具體內(nèi)容(支持字符串、json、數(shù)組、boolean等等),t為可選參數(shù)表示有效時(shí)間(單位:秒)

如存儲(chǔ)k為123過期時(shí)間1秒,則調(diào)用put('k', '123', 1)方法;若永久存儲(chǔ)調(diào)用put('k', '123')

永久保存json:put('k', {"a":"1"}),數(shù)組、boolean等同理。

get(k, def)

k為key,def為可選參數(shù),表示無緩存數(shù)據(jù)時(shí)返回值(支持字符串、json、數(shù)組、boolean等等)

如讀取k緩存,則調(diào)用get('k');若想要無緩存時(shí),返回默認(rèn)值則get('k','默認(rèn)值'),支持各個(gè)數(shù)據(jù)類型。

remove(k)

移除某個(gè)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. }

先存儲(chǔ)key的數(shù)據(jù)(字符串、數(shù)組、json),再判斷過期時(shí)間是否大于0,當(dāng)大于0時(shí),存儲(chǔ)key+一個(gè)后綴,內(nèi)容為當(dāng)前時(shí)間戳(單位秒)+有效時(shí)間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+一個(gè)后綴得到時(shí)間戳,如果時(shí)間戳存在,切小于當(dāng)前時(shí)間,說明過期;【那么,當(dāng)有默認(rèn)值時(shí)返回默認(rèn)值(包含字符串、數(shù)組、json),否則返回空?!慨?dāng)沒過期時(shí),正常讀取key的內(nèi)容,key存在時(shí)正常返回;否則返回默認(rèn)值,當(dāng)不存在默認(rèn)值時(shí)返回空。

其他方法

 

		
  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個(gè)key,因?yàn)榇鎯?chǔ)的時(shí)候,可能存了時(shí)間戳,當(dāng)然即使不存在key,移除也是不會(huì)報(bào)錯(cuò)的。

 

四、如何使用

 

下載src文件夾內(nèi)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: '存儲(chǔ)成功',
  42. duration: 500,
  43. })
  44. }


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18134.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢