微信小程序的本地存储

为什么要要把数据存在本地呢？

因为缓存数据减少前后端交互所浪费的事件

 1. 每次请求数据 由于数据量非常大 导致接口请求时间超过1s2. 缓存数据 可以不用频繁的去请求数据(常规操作中,一般是由后台设置在响应头中的接口数据是否缓存的)

前端存储或者缓存

1.存储的位置(本地存储)浏览器和微信小程序的本地存储浏览器 1. window.localStorage.setIte("key","value");微信小程序2. wx.setStorageSync("key","value")在浏览器中 存储的数据必须要转换成字符串在小程序的本地存储中，不需要进行任何的转换 存的数据类型是什么 取出来的就是什么

思路分析：

1.页面刚开始加载的时候判断一下本地存储中是否存在数据
2.如果没有数据, 发送请求
3.如果存在数据判断一下旧数据有没有过期如果没有过期则直接使用已经过期重新请求新的数据

下面是全部的操作：

Page({/*** 页面的初始数据*/data: {leftDatelist: [],rightDatelist: [],//当前选中的itemcurrentIndex: 0,//滚动位置初始化scrollTop: 0},//定义个当前页面的全局变量dataList: []，//获取全部的数据/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let dataList = wx.getStorageSync('dataList');console.log(dataList);if (!dataList) {//当本地没有任何数据存储的时候 进行获取数据this.getLeftDatelist()} else {//本地存在缓存数据//判断数据是否过期if ((+new Date() - dataList.time) > 10000) {//设置10s过期时间并且进行判断//当超时之后 重新获取数据this.getLeftDatelist()} else {this.dataList = dataList.data;//获取左侧按钮内容let leftDatelist = this.dataList.map(item => item.cat_name);//获取右侧商品分类列表let rightDatelist = this.dataList[0].children;this.setData({leftDatelist,rightDatelist})}}},//点击左侧的分类getLeftDatelist() {wx.$http({url: "categories"}).then(res => {this.dataList = res.data.messagewx.setStorageSync("dataList", {time: +new Date(),data: this.dataList})let leftDatelist = this.dataList.map(item => item.cat_name);let rightDatelist = this.dataList[0].children;this.setData({leftDatelist,rightDatelist})})}
})

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

微信小程序使用本地存储
在使用微信小程序的时候当获取接口的数据的时候,接口传输过来的数据很大,而每一次回到这个页面又再一次的查询获取数据,这难免会拖垮小程序的速度.这个时候就需要使用本地存储. 变量的含义 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. 对象设置: ...

微信小程序的本地存储

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

最新文章

热门文章