前端性能优化-微信小程序的storage缓存请求数据

前言

微信小程序的storage缓存是用于在用户设备上存储数据的机制，它有10MB的最大限制。其特点和使用方法如下：

1. 用户数据隔离：微信用户的每个小程序都有独立的storage空间，同一个微信用户的不同小程序之间，以及不同用户之间，无法互相访问对方的数据。
2. 数据存储形式：数据以键值对的形式存储，其中单个键允许存储的最大数据长度为1MB，所有数据加起来的存储空间上限为10MB。
3. 数据操作方法：可以使用wx.setStorage（或wx.setStorageSync）来设置或存储数据，使用wx.getStorage（或wx.getStorageSync）来获取数据，使用wx.clearStorage（或wx.clearStorageSync）来清理数据。
4. 异步与同步：wx.setStorage和wx.getStorage是异步的，它们不会阻塞程序的执行，而wx.setStorageSync和wx.getStorageSync是同步的，会直接返回结果。
5. 插件隔离策略：如果一个小程序使用了多个插件，这些插件之间的storage是不互通的，插件与小程序本身的storage也是隔离的。

微信小程序的storage缓存提供了一种方便的数据存储方式，但需要注意其存储限制和隔离策略，以确保数据的正确使用和管理。

---

通常，无论是web端，还是小程序，请求页面数据都是一打开就去发起

vue中：created方法中直接调用请求方法

微信小程序中：onLoad: function () {} 方法中直接调用请求方法

也就是说，在页面创建的一瞬间，就发送请求给后端，用户每次新打开这个页面，就会发送请求，如果请求返回的数据量小还好，以当今的网络不会有什么感觉，但是如果返回的数据量很大，有好几百kb之类的，那就要考虑数据缓存优化了，不然用户反复请求造成资源浪费、卡顿，体验非常不好。

在控制台中查看请求返回的数据量大小

---

 storage缓存数据

 当页面创建时，不要直接发送请求，而是先通过获取storage中的缓存，再决定是否重新发起请求

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取当前页面数据
    //  1 获取本地存储中的数据  (小程序中也是存在本地存储 技术)
    const Cates = wx.getStorageSync("cates");
    // 2 判断==》如果没有存储过，则表示没有还没有请求过
    if (!Cates) {
      // 直接发送请求获取数据
      this.getCates();
    } else {  //storage中有数据，表示请求过
      // 有旧的数据 根据定义过期时间去判断是否过期 ===》 超过一定时间后才允许再次请求
      //? Date.now() ==》得到当前时间的【毫秒数】时间戳   可进行加减，进行比较
      //! 计算得到已经过了 10秒了 那就可以重新发起请求了
      if (Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCates();
      } else {  //还没过期，那就使用storage中存储的数据
        // 可以使用storage中旧的数据，不发送请求，节约资源
        this.data.Cates = Cates.data;
        
      }
    }
  },

发送请求成功后，需要将数据与时间戳一起存入storage中，用于 onLoad 中 进行判断是否过期

  // 页面获取数据的方法
  getCates () {
   //封装的wx请求方法，避免回调地狱
    cjRequest({
      url: "xxxxx"
    })
      .then(res => {
        console.log(res);
        this.data.Cates = res.data;
        /**
         *把接口的数据存入到本地Storage存储中
          通过加入time字段，用于进行判断数据请求的间隔（数据是否过期）
           ==》进而决定是否重新发起请求再次获取数据，减小损耗
        */
        wx.setStorageSync("cates", {
          // Date.now() ==》得到当前时间的【毫秒数】时间戳，用于后续判断是否过期
          time: Date.now(),
          // 将请求返回的数据
          data: this.Cates
        });
      })
  },

至此，就实现了前端数据缓存，至于过期的时间可以自行设置，这里是10s

---

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！