数据持久化

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

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

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

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

未使用数据缓存的用户体验 使用数据缓存的用户体验

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

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

从本地获取数据的方法:

function getLocalData(key) {
    return new Promise((resolve, reject) => {
        let group = 'homeData'; // 数据存储的组,开发者可按照页面进行分组,防止不同页面的数据互相覆盖
        swan.getStorage({
            key: group + '_' + key,
            success: res => {
                // console.log('get', res);
                let localData = res.data;
                resolve(localData);
            },
            fail: err => {
                console.error('读取失败', err);
                reject(err);
            }
        });
    });
}
module.exports.getLocalData = getLocalData;

向本地存储数据的方法:

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

# 使用注意事项

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