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

  }

});
复制代码

规划

• 初始化应用时候的同步读取缓存换用异步读取
• 增长代码测试