微信小程序使用本地存储

梦里梦外; 2023-07-21 08:54 116阅读 0赞

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

变量的含义  
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，在时间间隔内数据未过期的时候就会使用旧数据，并且将旧数据进行渲染。  
![在这里插入图片描述][20200403115643551.gif]

[20200403115643551.gif]: /images/20230528/2020eadf1f6c445da90fc95b8abd4150.png