第四次尝试

今儿对于数据的存储思考了会儿,最后决定

保存数据到本地存储

在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>
posted @ 2019-02-22 21:05  忒儿  阅读(184)  评论(0编辑  收藏  举报