微信小程序使用本地存储

在使用微信小程序的时候当获取接口的数据的时候，接口传输过来的数据很大，而每一次回到这个页面又再一次的查询获取数据，这难免会拖垮小程序的速度。这个时候就需要使用本地存储。

变量的含义
Cates ：接口返回的数据， 是一个数组类型
leftMenuList和rightContent：需要渲染的数据，也是数组类型。
.getCates方法：表示从接口获取数据的一个方法。

将数据存储到本地

首先使用这一段代码对数据进行保存：第一个参数表示存储后的”文件名“，后面是一个字典类型的变量，现货区当前时间，再将获取的数据传给data表示存储，这个时候这一个文件当中就包含了time和data。

 wx.setStorageSync("cates",{time:Date.now(),data:this.Cates})

获取本地数据

在onLoad函数里面，使用以下代码进行获取数据：使用方法直接获取文件名。

const Cates =wx.getStorageSync("cates");

将数据渲染到界面

如下代码段所示：最先对数据文件进行判断，不存在数据文件的时候重新获取，存在的时候，首先判断数据的存在时间是否超过了10秒（表示数据是否过期，以10秒为界）。未过期的时候使用旧数据，将原先定义好的需要渲染的数据再一次调用。

if(!Cates){
        //不存在数据时，发送请求
        this.getCates();
    }else{
      //存在时：
      if(Date.now()-Cates.time>=1000*10){
        this.getCates();
      }else{
        console.log("使用旧数据")
        this.Cates=Cates.data
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }

最后就是效果图了：在使用10秒为间隙的时候时间过长，不好演示：下面的时间间隔为2秒即过期：在下方的storage里面可以看到存储数据的文件 cates，在时间间隔内数据未过期的时候就会使用旧数据，并且将旧数据进行渲染。