今儿对于数据的存储思考了会儿,最后决定
保存数据到本地存储
在item.js文件中创建save方法并与视图绑定
// item.js
Page({
data: {
title: '',
cate:'',
account: '',
modalHidden: true
},
// 标题文本框
bindTitleInput: function(e) {
this.setData( {
title: e.detail.value
})
// console.log(e.detail.value)
},
// 金额radio
radioChange: function(e) {
this.setData({
cate: e.detail.value
})
// console.log(e.detail.value)
},
// 金额文本框
bindAccountInput: function(e) {
this.setData( {
account: e.detail.value
})
// console.log(e.detail.value)
},
save: function() {
var that = this
// 本条数据打包成json
var record = {
title: this.data.title,
cate: this.data.cate,
account: this.data.account,
}
var data = []
wx.getStorage({
key: 'db',
success: function(res) {
console.log('db:' + res.data)
data = res.data
// 取出本地数据
data.push(record)
// 存回本地
wx.setStorage({
key: 'db',
data: data
})
// 提示框
that.setData({
modalHidden: false
});
}
})
},
// 使用onShow而不使用onLoad,使得添加返回后自刷新
onShow: function() {
wx.getStorage({
key: 'db',
// 初始加载无数据,故插入一条空数组的新key
fail: function() {
// 存回本地
wx.setStorage({
key: 'db',
data: []
})
}
})
},
// 关闭对话框
hideAlertView: function() {
this.setData({
'modalHidden': true
})
// 返回上一页
wx.navigateBack()
}
})
值得注意的是:setStorage是包在getStorage方法回调事件里,保证线程一致性,即使使用了Sync方式的方法,依次不能保证数据同步,经多次实践发现getStorage方法是最后被调的,于是就无法取出原来的数据,也就不能追加本条数据了。
与视图绑定添加按钮的点击事件与弹窗的点击事件
<button class="button" type="primary" bindtap="save">添加</button>
<modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="hideAlertView">
<view>添加成功</view>
</modal>