二次封裝的快取框架wCache（支援快取時間、預設值）--微信小程式

邵磊發表於2017-05-16
封裝快取框架微信小程式

一、前言

開發客戶端時常會用到一些非永久快取的需求，而微信快取只能按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原生的即可。

三、框架講解

二次封裝的快取框架wCache（支援快取時間、預設值）--微信小程式

put(k, v, t)

var postfix = '_deadtime';
function put(k, v, t) {
  // console.log(k);
  wx.setStorageSync(k, v)
  var seconds = parseInt(t);
  if (seconds > 0) {
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000 + seconds;
    // console.log(timestamp);
    wx.setStorageSync(k + postfix, timestamp + "")
  } else {
    wx.removeStorageSync(k + postfix)
  }
}複製程式碼

先儲存key的資料（字串、陣列、json），再判斷過期時間是否大於0，當大於0時，儲存key+一個字尾，內容為當前時間戳（單位秒）+有效時間t。

get(k, def)

function get(k, def) {
  var deadtime = parseInt(wx.getStorageSync(k + postfix))
  if (deadtime) {
    if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
      if (def) { return def; } else { return; }
    }
  }
  var res = wx.getStorageSync(k);
  if (res) {
    return res;
  } else {
    return def;
  }
}複製程式碼

get方法，先通過key+一個字尾得到時間戳，如果時間戳存在，切小於當前時間，說明過期；【那麼，當有預設值時返回預設值（包含字串、陣列、json），否則返回空。】當沒過期時，正常讀取key的內容，key存在時正常返回；否則返回預設值，當不存在預設值時返回空。

其他方法

function remove(k) {
  wx.removeStorageSync(k);
  wx.removeStorageSync(k + postfix);
}

function clear() {
  wx.clearStorageSync();
}複製程式碼

remove(k)需要移除2個key，因為儲存的時候，可能存了時間戳，當然即使不存在key，移除也是不會報錯的。

四、如何使用

  1. 下載src資料夾內wCache.js檔案
  2. 需要使用的js檔案頭加入var wc = require('../../src/wcache.js')。
  3. var s=wc.get('k', '你好')、wc.put('k', 'string你好啊')等;

使用例子

 get(e) {
    this.setData({
      text: null
    });
    switch (e.currentTarget.dataset.type) {
      case "def":
        this.setData({
          text: wc.get('k')
        });
        break;
      case "string":
        this.setData({
          text: wc.get('k', '你好')
        });
        break;
      case "json":
        this.setData({
          text: wc.get('k', { "a": "1" })
        });
        break;
    }

  }
  put(e) {
    console.log(e);
    switch (e.currentTarget.dataset.type) {
      case "string":
        wc.put('k', 'string你好啊');
        break;
      case "json":
        wc.put('k', { "b": "3" }, 2);
        break;
      case "list":
        wc.put('k', [1, 2, 3]);
        break;
      case "boolean":
        wc.put('k', true);
        break;
    }
    wx.showToast({
      title: '儲存成功',
      duration: 500,
    })
  }複製程式碼

原始碼地址：github.com/qq273681448…

相關文章