小程序getStorageSync、setStorageSync数据缓存，优化页面加载

原创已于 2022-04-20 08:53:31 修改 · 1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-03-22 16:44:45 首次发布

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

小程序

15 篇文章

订阅专栏

本文介绍了在微信小程序中如何使用wx.setStorageSync()和wx.getStorageSync()进行数据同步缓存，以及如何通过时间戳检查数据新鲜度。重点讲述了在`onLoad`生命周期中获取并更新分类数据的逻辑，同时利用wx.setStorageSync()进行数据持久化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、将数据缓存到本地：

同步缓存：wx.setStorageSync()

异步缓存：wx.setStorage()

2、从本地缓存获取数据：

同步：wx.getStorageSync()

异步：wx.getStorage()

onLoad(options) {
    // 获取本地数据
    const Cates = wx.getStorageSync('cates');
    if (!Cates) {
      this.getCates();
    } else {
      // 定义数据过期时间10s
      if(Date.now() - Cates.time > 1000*10) {
        this.getCates();
      } else {
        this.Cates = Cates.data;
        // 重新渲染数据
        let leftMenuList = this.Cates.map(Cates => Cates.cat_name);
        this.setData({
          leftMenuList
        })
        
      }
    }
  },
    /**
   * 获取分类数据
   */
  async getCates() {
    const result = await request({ url: '/categories' });
    this.Cates = result;
    // 数据缓存
    wx.setStorageSync('cates', { time: Date.now(), data: this.Cates });
    // 渲染数据
    let leftMenuList = this.Cates.map(Cates => Cates.cat_name);
    this.setData({
      leftMenuList
    })
  },