一、前言

 

開發(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. }