vant dialog中传入数据_数据缓存API

在小程序里面我们经常会有一些数据存取的操作，比如一个简单的画板小程序的应用。比如说用户会设置画笔的颜色画笔的大小，我们希望用户在下次进入小程序能够记住这些设置不用再去手动的添加。如果通过服务器去请求这些设置信息会增大服务器通信的成本开销，小程序给我们提供了一个数据缓存的功能。那么如何使用数据缓存的功能呢？我们可以使用微信小程序给我提供的这些API来实现，现在然我们一起来学习一下吧：

Key代表了本地缓存中指定的key，data代表了需要存储的内容，success表示了接口调用成功的回调函数。现在让我们通过一个实例来看下吧

<!--index.wxml-->
<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">key</view>
          </view>
          <view class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入key" name="key" value="{{key}}" bindinput="keyChange"></input>
          </view>
        </view>
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">value</view>
          </view>
          <view class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入value" name="data" value="{{data}}" bindinput="dataChange"></input>
          </view>
        </view>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="setStorage">存储数据</button>
        <button bindtap="getStorage">读取数据</button>
        <button bindtap="getAllStorage">获取所有数据</button>
        <button bindtap="clearStorage">清理数据</button>
      </view>
    </view>
  </view>

  <modal title="{{dialog.title}}" hidden="{{dialog.hidden}}" no-cancel bindconfirm="confirm">{{dialog.content}}</modal>
</view>
Page({
  data: {
    key: '',
    data: '',
    dialog: {
      title: '',
      content: '',
      hidden: true
    }
  },
  keyChange: function (e) {
    this.data.key = e.detail.value
  },
  dataChange: function (e) {
    this.data.data = e.detail.value
  },
  getStorage: function () {
    var key = this.data.key,
        data = this.data.data
    var storageData

    if (key.length === 0) {
      this.setData({
        key: key,
        data: data,
        'dialog.hidden': false,
        'dialog.title': '读取数据失败',
        'dialog.content': 'key 不能为空'
      })
    } else {
      storageData = wx.getStorageSync(key)
      if (storageData === "") {
        this.setData({
          key: key,
          data: data,
          'dialog.hidden': false,
          'dialog.title': '读取数据失败',
          'dialog.content': '找不到 key 对应的数据'
        })
      } else {
        this.setData({
          key: key,
          data: data,
          'dialog.hidden': false,
          'dialog.title': '读取数据成功',
          'dialog.content': "data: '"+ storageData + "'"
        })
      }
    }
  },
  setStorage: function () {
    var key = this.data.key
    var data = this.data.data
    if (key.length === 0) {
      this.setData({
        key: key,
        data: data,
        'dialog.hidden': false,
        'dialog.title': '保存数据失败',
        'dialog.content': 'key 不能为空'
      })
    } else {
      wx.setStorage({
        key, 
        data
      });
      // console.log(wx.getStorageSync(key));
      this.setData({
        key: key,
        data: data,
        'dialog.hidden': false,
        'dialog.title': '存储数据成功'
      })
    }
  },
  clearStorage: function () {
    wx.clearStorageSync()
    this.setData({
      key: '',
      data: '',
      'dialog.hidden': false,
      'dialog.title': '清除数据成功',
      'dialog.content': ''
    })
  },
  getAllStorage: function () {
    wx.getStorageInfo({
      success: function(res) {
        console.log('获取所有缓存数据', res);
      }
    })
  },
  confirm: function () {
    this.setData({
      'dialog.hidden': true,
      'dialog.title': '',
      'dialog.content': ''
    })
  }
})

今天的内容就到这里了，我们下期再见。