一、前言

 

開發(fa)客戶(hu)端(duan)時(shi)常會用到一些非永久(jiu)緩存(cun)的需(xu)求(qiu)，而微信緩存(cun)只能按key永久(jiu)緩存(cun)；其(qi)次，當讀(du)取緩存(cun)失敗時(shi)，有(you)時(shi)需(xu)要給(gei)個默認值，所以(yi)得二次判(pan)斷下(xia)，今天想了(le)一下(xia)何不封裝(zhuang)一個緩存(cun)框架。

二、支持方法

 

put(k, v, t)

k為key，v為具體內容（支持字(zi)符(fu)串、json、數組、boolean等等），t為可(ke)選參數表示有(you)效時(shi)間（單(dan)位：秒）

如存(cun)儲k為123過期時(shi)間1秒(miao)，則(ze)調(diao)用put('k', '123', 1)方法；若永久存(cun)儲調(diao)用put('k', '123')

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

get(k, def)

k為(wei)key，def為(wei)可(ke)選參數，表示(shi)無緩存數據時返回值（支(zhi)持(chi)字符串、json、數組、boolean等等）

如(ru)讀取k緩存，則調用get('k')；若想要無緩存時，返(fan)回默認值則get('k','默認值')，支(zhi)持各個(ge)數(shu)據(ju)類型(xing)。

remove(k)

移除某個key

clear()

清空所有key

其他方法

使用wx原生的(de)即可。

三、框架講解

 

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. }

先存儲(chu)key的數據（字(zi)符(fu)串、數組(zu)、json），再判斷過期(qi)時(shi)(shi)間是否大于0，當大于0時(shi)(shi)，存儲(chu)key+一個(ge)后綴，內容為當前時(shi)(shi)間戳(chuo)（單(dan)位秒）+有(you)效時(shi)(shi)間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方法，先通過(guo)key+一個后綴得到(dao)時(shi)間(jian)戳，如果時(shi)間(jian)戳存(cun)(cun)在(zai)，切小于當前時(shi)間(jian)，說(shuo)明(ming)過(guo)期；【那么，當有默(mo)認值(zhi)(zhi)時(shi)返(fan)回(hui)默(mo)認值(zhi)(zhi)（包(bao)含字符串(chuan)、數組、json），否(fou)則返(fan)回(hui)空。】當沒(mei)過(guo)期時(shi)，正常(chang)讀取key的(de)內(nei)容(rong)，key存(cun)(cun)在(zai)時(shi)正常(chang)返(fan)回(hui)；否(fou)則返(fan)回(hui)默(mo)認值(zhi)(zhi)，當不存(cun)(cun)在(zai)默(mo)認值(zhi)(zhi)時(shi)返(fan)回(hui)空。

其他方法

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，因為存儲的時候(hou)，可能存了時間戳，當(dang)然即使(shi)不(bu)存在key，移除也(ye)是不(bu)會報錯的。

四、如何使用

 

下(xia)載src文(wen)件(jian)夾內wCache.js文(wen)件(jian)  需要使用的(de)js文(wen)件(jian)頭加入var wc = require('../../src/wcache.js')。  var s=wc.get('k', '你好(hao)')、wc.put('k', 'string你好(hao)啊')等;  使用例子

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', '你(ni)好')
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你(ni)好啊');
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. }