小程序中缓存数据逻辑代码

小程序中缓存数据逻辑代码（如果页面请求数据过多，如果小程序中存在缓存，且不过期，那么下次在加载页面的时候可以不发送请求）

很详细啦

import { request } from "../../request/index.js";
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左边的数据
    leftMenuList: [],
    // 右边的数据
    rightcontent:[],
    // /被点击的左侧菜单索引
    currentIndex: 0
  },

  // 接口的返回数据
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 判断本地存储有没有旧的数据  如果没有就 直接发送请求  如果有数据  就展示旧数据
    // 放一个对象，里面两个属性：time 是当前时间戳 什么时候存储的就把时间也存储进去，还有数据
    // {time:Date.now(), data:[...]}
    
    // 1 获取本地存储中的数据
    // wx.getStorageSync()  本地缓存中指定的 key
    const Cates = wx.getStorageSync("Cates")
    console.log(Cates);   //拿到本地存储中的数据
    // 2.判断 有没有旧数据
    if(!Cates) {
      // 没有数据 发送请求
      this.getCates()
    } else {
      // 有旧的数据   还需要判断有没有过期  定义时间10s   改成5分钟
      // 如果当前时间减去 数据时间 超过 10s 重新发起请求
      if(Date.now() - Cates.time > 1000 * 10) {
        console.log('1',Date.now() - Cates.time) //1622776951160
        this.getCates()
      } else {
          console.log('可以使用旧数据');
            // 获取本地存储的数据  把本地存储的数据赋值给 Cates[] , 拿到数据再去进行渲染
            this.Cates = Cates.data
            let leftMenuList = this.Cates.map(v => v.cat_name);
            let rightcontent = this.Cates[0].children
            this.setData({
              leftMenuList,
              rightcontent
            })
      }
    }
    },

  // 分类数据
  getCates() {
    request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
    })
    .then(result => {
      // console.log(result);
      // 返回的所有数据
      this.Cates = result.data.message;

      // web 中的本地存储和 小程序中有什么不同
      // web: 存储： localStorage.setItem("key", "value")   拿值：localStorage.getItem('key')
      // web : 不管存入的是什么类型的数据，最终都会先调用 toString()  把数据变成了字符串  在存入进去
      // 小程序中：wx.setStorage(key, value)   拿值： wx.setStorageSync('key')
              // 小程序中不存在数据转换 存什么类似的数据进去  获取的就是什么数据

      // 拿到数据把他存储在本地存储中 
      wx.setStorageSync('Cates', {time: Date.now(), data: this.Cates})

      // 构造左侧的数据  map 方法：返回值是原数组的平方根
      let leftMenuList = this.Cates.map(v => v.cat_name);
      // let leftMenuList = this.Cates.map(function(v) {
      //   return v.cat_id
      // } );
      // 构造右侧的数据    先拿到第一项的数据布局
      let rightcontent = this.Cates[0].children
      // 修改data里面的数据 通过this.setData
      this.setData({
        leftMenuList,
        rightcontent
      })
    })
    
  },