pstorage誕生記

github 地址

github.com/GreenPomelo…

背景

在南京郵電大學小程序中，存在課程表、我的信息之類不常常更新的數據，這些數據咱們一般是經過本地緩存的方式進行存儲，並在特定的狀況下才進行數據更新。因爲小程序自己的異步緩存接口採用的是傳統回調函數的形式，並且在一開始無需考慮異步和同步緩存的性能差別，咱們都使用了同步的方法去處理本地數據存儲：

// In login page
wx.setStorageSync('User', userData);
// In profile page
const userData = wx.getStorageSync('User')
複製代碼

同時，因爲團隊內部你們的水平有高有低，偶爾會有剛入門的新同窗加入，就會出現如下代碼：

if (wx.getStorageSync('User')) {
  // do something
  ...
  this.name = wx.getStorageSync('User').name;
}
複製代碼

很顯然，這樣的作法會形成緩存被頻繁讀取，並非一種最佳實踐。

而且，隨着業務愈來愈複雜，咱們須要緩存的數據愈來愈多，在業務代碼裏，咱們寫出了愈來愈多不可控制的存取緩存的代碼，而且分散在各個頁面，以致於不少時候，不知道究竟哪些數據在哪裏被緩存了。另外一方面，因爲代碼總體都採用的同步方式處理數據，當存儲相似課表或者成績這種體積偏大的數據的時候就會存在必定的性能問題。

因此綜上所述，爲了更加合理的管理緩存數據，而且在必定程度上提高性能，咱們設計了一個通用的緩存管理方案— pstorage來提高應用的性能以及架構上的合理性。

pstroage 介紹

在覈心 api 設計上，pstorage 嚴格遵循 W3C 標準：

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString? getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};
複製代碼

storage 實例的核心方法有 10 個，異步方法是：getItem /setItem/removeItem/clear/getInfo，對應的同步方法是 getItemSync/setItemSync/removeItemSync/clearSync/getInfoSync

特色

- 支持多端緩存器適配

- 統一的存儲數據管理

- 運行時緩存，減少對 Storage 的讀取壓力

- 掌握被存儲數據的信息

- 同時支持同步、異步寫法

- 兼容緩存器其餘沒有使用到的 api

安裝

npm install pstorage --save

使用

基本使用方法：

const Storage = require('pstorage');
const storage = new Storage({
  target: localStorage,
  keys: ['userInfo']
});
const userInfo = {
  name: 'Jack'
};
try {
  storage.setItemSync('userInfo', userInfo);
} catch (err) {
  console.log(err);
}
// 異步存儲讀取
storage
  .setItem('userInfo', userInfo)
  .then(() => {
  	storage.getItem('userInfo').then(result => {
      console.log(result);
    });
	});
  .catch(err => {
    console.log(err);
  });
複製代碼

注意：在使用 pstorage 的時候，須要先經過 keys 字段註冊須要存儲的變量，以此來管理須要使用的變量。

多平臺適配

因爲將來的產品可能會進行多端投放，因此 pstroage 自己已經支持了多平臺：

• Web 容器內已經支持的緩存器有：localStorage, sessionStorage；

• 小程序容器下已經支持：微信小程序、阿里小程序、頭條小程序；

• ReactNative 的容器下支持：AsyncStorage

同時，還支持適配器的寫法，用來選擇性重寫緩存器的原生方法，具體使用方法以下：

const Storage = require('pstorage');

const getItemAsync = function(getItem) {

  return function(key, callback, fallback) {

    try {

      const value = getItem(key);

      callback(value);

    } catch (err) {

      fallback(err);

    }

  };

};

const setItemAsync = function(setItem) {

  return function(key, data, callback, fallback) {

    setItem(key, data);

    callback();

  };

};

const storage = new Storage({

  target: localStorage,

  keys: ['userInfo'],

  adapters: {

    getItem: getItemAsync(localStorage.getItem),

    setItem: setItemAsync(localStorage.setItem),

    getItemSync: localStorage.getItem,

    setItemSync: localStorage.setItem

  }

});
複製代碼

規劃

• 初始化應用時候的同步讀取緩存換用異步讀取
• 增長代碼測試