数据持久化

在智能小程序中，我们把：从服务端获取到的数据，通过swan.setStorage方法保存在本地，页面渲染时直接从本地获取所需数据的这一行为叫做“数据持久化”。

为什么要把页面数据持久化

在包含了：固定 banner、筛选、导航等这些低时效性数据的页面里，把这些低时效性的数据存在本地，页面加载时直接从本地读取、渲染数据，会使页面上的留白时间大大减少，极大的提升用户体验，对白屏率指标也将有宜。

注意：对于存放在本地的数据，并非永远不再更新。而是在请求当前页面其他数据时，拿到最新的要持久化的数据，并将新数据替换进本地，供下次加载使用。

未使用数据缓存的用户体验使用数据缓存的用户体验
数据持久化 - 图1数据持久化 - 图2

数据持久化的优化方案示例

  1. 定义存、取本地数据的工具方法：

从本地获取数据的方法：

  • JS
  1. function getLocalData(key) {
  2.     return new Promise((resolve, reject) => {
  3.         // 数据存储的组，开发者可按照页面进行分组，防止不同页面的数据互相覆盖
  4.         let group = 'homeData';
  5.         swan.getStorage({
  6.             key: group + '_' + key,
  7.             success: res => {
  8.                 // console.log('get', res);
  9.                 let localData = res.data;
  10.                 resolve(localData);
  11.             },
  12.             fail: err => {
  13.                 console.error('读取失败', err);
  14.                 reject(err);
  15.             }
  16.         });
  17.     });
  18. }
  19. module.exports.getLocalData = getLocalData;

向本地存储数据的方法：

  • JS
  1. function setLocalData (data) {
  2.     return new Promise((resolve, reject) => {
  3.         // 数据存储的组，开发者可按照页面进行分组，，防止不同页面的数据互相覆盖
  4.         let group = 'homeData';
  5.         let keys = Object.keys(data);
  6.         keys.forEach(item => {
  7.             swan.setStorage({
  8.                 key: group + '_' + item,
  9.                 data: data[item],
  10.                 success: res => {
  11.                     resolve(res);
  12.                 },
  13.                 fail: err => {
  14.                     console.error(err);
  15.                     reject(err);
  16.                 }
  17.             });
  18.         });
  19.     });
  20. }
  21. module.exports.setLocalData = setLocalData;
  1. 在页面onload时，调用getLocalData方法，从本地取数据
  • JS
  1. // 引入存取本地数据的公共方法
  2. const utils = require('./lib');
  3. Page({
  4.     onload: function() {
  5.         // 从缓存中获取指定的数据
  6.         utils.getLocalData('diamondzone').then(diamondzone => {
  7.             // 把获取到的数据，传入对应的数据处理函数中
  8.             if (diamondzone) {
  9.                 this.setDiamondzoneData(diamondzone);
  10.             }
  11.         });
  12.     }
  13. })
  1. 在页面 request 方法的 success 回调中，调用setLocalData方法把新数据替换到本地
  • JS
  1. // 引入存取本地数据的公共方法
  2. const utils = require('./lib');
  3. Page({
  4.     request(path, params) {
  5.         swan.request({
  6.             // 接口地址
  7.             url: path,
  8.             // 接口参数
  9.             data: params,
  10.             success: res => {
  11.                 // 将从后端获取到的最新数据存进本地
  12.                 utils.setLocalData(res.diamondzone);
  13.             }
  14.         })
  15.     }
  16. })

使用注意事项

  1. 本地存储的数据总量不宜过大，建议维持在 1M 以内；
  2. “数据持久化”仅限于对时效性没有要求的数据使用，对于时效要求高的数据，不应存储在本地。