第四次尝试

本文分享了在微信小程序中如何使用本地存储保存数据的方法,包括在item.js文件中创建save方法并将其与视图绑定,实现数据的保存及读取,确保线程一致性。

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

保存数据到本地存储

在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>

转载于:https://www.cnblogs.com/muailiulan/p/10420681.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值