微信小程序使用本地存储

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

变量的含义
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.datalet leftMenuList = this.Cates.map(v => v.cat_name);let rightContent = this.Cates[0].children;this.setData({leftMenuList,rightContent})}}

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

微信小程序使用本地存储相关推荐

微信小程序---全局/本地存储
1. 在app.js 中存储 1.1 接口 // 往本地存储,防止小程序关闭,重写登录 wx.setStorageSync('userinfo', info); // 从本地获取值 wx.getSto ...
微信小程序实现本地存储
效果如下用到小程序的wx.getStorageSync()方法本地存储格式思路 1.第一次进入页面时候判断是否存在本地存储以及是否收藏 2.如存在,则说明以前进行过收藏或者取消收藏 3.如果第一 ...
微信小程序的本地存储、页面跳转、以及请求封装
一.常见的交互反馈设计 1.使用button组件的loading属性,在按钮的文字前边出现一个Loading 2.wx.showToast显示提示(一般搭配wx.hideToast使用) wx.sho ...
微信小程序：本地存储数据
1.本地存储多个数据(嵌套数组),封装数组对象 js书写:addr本身也是数组 var newNa = {"tel": 122222,"addr":that.d ...
怎么搭建微信小程序的本地测试服务器
Windows环境下手把手教你搭建Windows环境微信小程序的本地测试服务器问题的提出 Mac环境方便快捷地搭建小程序的测试服务器小程序对于网络请求的URL的特殊要求不能出现端口号不能用 ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
微信小程序与本地数据库的进行基础数据交互的案例——使用Java后台
微信小程序与本地数据库的进行基础数据交互的案例--使用Java后台案例介绍本地数据库储存用户信息表后台Java访问数据库,获得需要数据小程序端访问服务器环境配置及需要的项目代码资源: 案例介 ...
微信小程序：数据存储、传值、取值
小程序界面传值父级界面:A界面子级界面:B界面一.url传值详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面用 navig ...
微信小程序从本地相册加载图片并显示
需求从本地相册获取照片并且生成轮播图,然后通过照片的元数据读取时间.地点等信息. 实现图片主要通过url访问,微信api读取图片时会返回图片的url,通过设定数组,存储图片的url. 对象设置: ...

微信小程序使用本地存储

微信小程序使用本地存储相关推荐

最新文章

热门文章