小程序缓存技术

场景： 进入一个分类页面， 数据量特别大， 请求时间过长(超过50ms)，并且数据变化不大， 这时应该要考虑缓存技术了

分类数据效果

---

思路: 在打开页面时, 判断本地存储中有没有旧数据, 如果没有, 发送新请求来>获取; 如果有旧数据, 并且没有过期, 就使用本地存储的旧数据

未改造之前的代码

// 0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from "../../request/index.js"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: []
  },
  // 接口的返回数据
  Cates: [],
  // 页面开始加载 就会触发
  onLoad: function (options) {
    this.getCate()
  },
  // 获取分类数据
  getCate(){
    request({url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"})
    .then(result=>{
      this.Cates = result.data.message

      // 构造左侧的大菜单数据
      let leftMenuList = this.Cates.map(v=>v.cat_name)
      // 构造右侧的商品数据  当前只能 大家电的 数据
      let rightContent = this.Cates[0].children
      this.setData({
        leftMenuList,
        rightContent
      })
    })
  }
})

缓存实现 - 改造 onLoad 事件中的代码

• 1.获取本地存储中的数据 (小程序中也是存在本地存储 技术)
• 2.判断
• 3.把接口的数据存入到本地存储中

// 0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from "../../request/index.js"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧的菜单
    currentIndex: 0
  },
  // 接口的返回数据
  Cates: [],
  // 页面开始加载 就会触发
  onLoad: function (options) {
    // 0.web中的本地存储和 小程序中的本地存储的区别
    // 1.写代码的方式不一样了
    // web: localStorage.setItem("key":"value") localStorage.getItem("key")
    // 小程序:wx.setStorageSync("key",value)    wx.getStorageSync("key")
    // 存的时候 有没有做类型转换
    // web: 不管存入的什么类型的数据, 最终都会先调用一下 toString(), 把数据变成了字符串 再存入进去
    // 小程序: 不存在 类型转换的这个操作 存什么类型的数据进去, 获取的时候就是什么类型的数据
    // 1.先判断一下本地存储中有没有旧的数据
    //   {time:Date.now(),data:[...]}
    // 2.没有旧数据 直接发送新请求
    // 3.有旧的数据 同时 旧的数据也没有过期, 就使用 本地存储的旧数据即可

    // 1.获取本地存储中的数据 (小程序中也是存在本地存储 技术)
    const Cates = wx.getStorageSync("cates");
    // 2.判断
    if (!Cates) {
      this.getCate()
    } else {
      // 有旧的数据 定义过期事件  10s 改成 5分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        this.getCate()
      } else {
        // 使用旧的数据
        this.Cates = Cates.data
        // 构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v => v.cat_name)
        // 构造右侧的商品数据 当前只能 大家电的 数据
        let rightContent = this.Cates[0].children   // 这里的索引先写死, 后面再替换 ⭐⭐
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }

  },
  // 获取分类数据
  getCate() {
    request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/categories" })
      .then(result => {
        this.Cates = result.data.message
        // 把接口的数据存入到本地存储中
        wx.setStorageSync("cates", { "time": Date.now(), "data": this.Cates });

        // 构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v => v.cat_name)
        // 构造右侧的商品数据 当前只能 大家电的 数据
        let rightContent = this.Cates[0].children
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  }