微信小程序缓存获取数据教程

微信小程序缓存获取数据教程
每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB 。localStorage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。

数据常用于哪里？

对于数据需求较小的历史记录、购物车事件等都可以使用 storage 进行缓存， Storage 将数据存储在本地缓存中指定的 key 中，如果重复会覆盖掉原来该 key 对应的内容可以参照微信小程序开发手册中的Storage

如何使用异步接口进行数据缓存？

将数据存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个异步接口。

OBJECT参数说明：

示例代码

wx.setStorage({ key:key,
data:value })

当 setStorage 之后可以去到开发者工具里面查看这是没有保存值的情况

可以看到是没有 key

值的那么当我们去进行输入搜索

最后再去 storage

中查看

获取到了一个 key 为 history 的 Array

数组那么再去看看storage

得到了一个数组而且没有被覆盖，那么怎么实现的呢？先来看看js代码

search.js

设置data

data: {
status:false,
inputsearch:’’,
job:[],
history:[],

首先去获取storage中的值

onLoad: function (options) {
var that =this;
wx.getStorage({
key: ‘history’,
success: function(res){
that.setData({
history:res.data,
})
if(that.data.history.length==0){
that.setData({
status:false
});
}else{
that.setData({
status:true
})
}
},
fail: function(res) {
console.log(res+‘aaaaa’)
}
});
},

进行搜索和缓存数据到storage中

search:function(e){

var that =this;

var sear =this.data.inputsearch;

var jobs=this.data.job;

var input = new RegExp(sear);

var temp = [];

if(sear == ‘’){

wx.showToast({
title: ‘请输入要搜索信息’,
icon:none,
duration: 1000
});
return false;
}else{
this.data.history.unshift(sear);
wx.setStorage({
key: ‘history’,
data: that.data.history,
success: function(res){
that.setData({
history:that.data.history,
status:true
})
console.log(res.data);
},
})
for(let i =0;i
if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address)){
temp.push(jobs[i]);
var detail=temp;
app.globalData.details=detail;
}
}
if(temp ==’’){
wx.showToast({
title: ‘暂无此信息’,
icon:none,
duration: 1000

});
this.setData({
inputsearch:’’
})
}else if(temp){
wx.navigateTo({
url:’…/about/about’
})
this.setData({
inputsearch:’’
})
}
}
},

将 storage 中的 key 值设为 hisotry

wx.setStorage({
key: ‘history’,
data: that.data.history,

)}

定义一个数组 history 空数组去获取 storage 中的值,首先是去查询有没有该 key 值，如果没有则 fail ，那么 history 依然为空数组

wx.setStorage({
key: ‘history’,
data: that.data.history,
success: function(res){
that.setData({
history:that.data.history,
status:true
})
},

})

返回得到 history 之后再去将 inputsearch 的值添加到 history 中

这里有个误区可能你会将输入的值inputsearch push到一个新的空数组，然后再将这个新数组push到history数组中，但这个方法显然不可行，你添加之后新数组将会存放在history数组的第一个下标的数组下，对于history数组也就只有两个值

好了，回到我要说的，那么如何将 inputsearch 添加到 history 中呢,可以使用 unshift 方法或者 push 方法，这里应该使用 unshift 应该将每个新增值存放在 history 的第一个位置，这是其实就是一个用户体验问题了

var that =this;

var sear =this.data.inputsearch;

this.data.history.unshift(sear);

wx.setStorage({
key: ‘history’,
data: that.data.history,
success: function(res){
that.setData({
history:that.data.history,
status:true
})
console.log(res.data);
},
})

好了，这样就不会出现“覆盖掉”原来的 key 值的问题了

相关资讯：微信小程序微信小程序开发教程

微信小程序缓存获取数据教程相关推荐

许嵩音乐智能问答系统微信小程序之获取数据及文本分类
许嵩音乐智能问答系统微信小程序之获取数据及文本分类项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱数据获取 ...
微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
同时存多个变量缓存微信小程序_微信小程序缓存（本地缓存、异步缓存、同步缓存）详解...
微信小程序缓存关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage( ...
本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序之获取用户地址
在微信小程序中获取定位信息今天一整天基本上都在处理在微信小程序中获取准确地址,给出定位并给出所在城市的问题.经过走了半天弯路,现在总结一下所需要的步骤. 一. 先到腾讯位置服务中心获取KEY 通过小 ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...

微信小程序缓存获取数据教程

微信小程序缓存获取数据教程相关推荐

最新文章

热门文章