我觉得学习某一个新东西,最好还是从一个实际应用的例子上下手会比较好,在这里,我以一个简易版本的“留言板”小程序为例,下面大家先来看看代码实现:
*.wxml的内容如下:
*.js的内容:
Page({
/**
* 页面的初始数据
*/
data: {
inputVal: '',
msgData:[],
status: false
},
onLoad: function () {
var that = this;
wx.getStorage({
key: 'msgData',
success: function(res) {
that.setData({
msgData: res.data
});
if(that.data.msgData.length==0){
that.setData({status: false});
}else{
that.setData({status: true});
}
},
fail: function(res){
console.log('获取本地数据失败,值为:', res);
}
});
},
changeInputVal:function(e){
this.setData({
inputVal: e.detail.value
});
},
addMsg: function(){
var that = this;
var list = that.data.msgData;
list.push({
msg: that.data.inputVal
});
that.setData({
msgData: list,
inputVal: ''
});
wx.setStorage({
key: 'msgData',
data: that.data.msgData,
success: function(res){
that.setData({
msgData: that.data.msgData,
status: true
});
console.log('添加~setStorage成功:', res.data);
}
});
},
deleteMsg: function(e){
// console.log(e.target.dataset.index); 获取删除的对象下标
var that = this;
var n = e.target.dataset.index;
var list = that.data.msgData;
list.splice(n, 1);
that.setData({
msgData: list
});
wx.setStorage({
key: 'msgData',
data: that.data.msgData,
success: function (res) {
that.setData({
msgData: that.data.msgData
});
if(that.data.msgData.length==0){
that.setData({
msgData: that.data.msgData,
status: false
});
}else{
that.setData({
msgData: that.data.msgData,
status: true
});
}
console.log('删除~setStorage成功:', res.data);
}
});
}
})
代码演示如下:
我对于异步存储的理解是:哪个事件里有操作数据,setStorage就要放在哪个事件里,例如这个案例中的添加事件与删除事件都要操作数据,每执行一次事件都数据的变化,所以需要将setStorage放在这两个事件中,以备及时更新本地数据。
setStorage与setStorageSync的主要区别在于:一个是异步存储,一个是同步存储,即异步不会阻塞当前任务,不管数据存储成功与否,都会往下执行,而同步要等到存储成功后才能往下执行,异步可以保证好的性能,而同步可以保证数据的安全