应用（1）——同一页面调取data和示例：数据存储调用

1.同一页面获取data值 就在于var that和that.data.key

Page({
      data:{
            key:'this is key'
      },
      keyInput； function(e){ //给key的input一个bindinput，使输入时即触发keyInput，同步将输入的值传给js里的key
            this.setData({ key: e.detail.value })
      },
      showKey: function(){ //在Console展示key的值
            var that = this;
            console.log(that.data.key)
      }
})

2.缓存数据时的js page：

  setStorage:function(e) {
    let key=this.data.key;  //获取key的值
    if(key.length == 0) { //判空
      wx.showToast({
        title: 'KEY不能为空',
        icon: 'none'
      })
    }else{
      wx.setStorage({ //调用API
        data: this.data.data, //？？？？？？？this.data调取page的data，this.data.data使用data里的data
        key: 'key'
      })
    }
  }//在调试器的storage里可以看到key和data

例：完整的数据存储调取删除和清空实现
wxml页面

<view class='title'> 数据存储setStorage </view>
<view class="demo-box">
  <input name='key' placeholder="输入key" bindinput="keyInput" />
  <input name='data' placeholder='输入data' bindinput='dataInput' />
  <button type='primary' bindtap='setStorage'>存储</button>
</view>
<view style='height:100px'></view>
<view class='title'> 数据获取getStorage </view>
<view class="demo-box">
  <input name='Fkey' placeholder="查询的key" bindinput="FkeyInput" />
  <button type='primary' bindtap="getStorage">数据获取</button>
  <view class="title">DATA的值：{{Fdata}}</view>
</view>
<view style='height:100px'></view>
<view class='title'> 数据删除removeStorage </view>
<view class="demo-box">
  <input name='Rkey' placeholder="要删除的key" bindinput="RkeyInput" />
  <button type='primary' bindtap="removeStorage">数据删除</button>
</view>
<view style='height:100px'></view>
<view class='title'> 数据清空clearStorage </view>
<view class="demo-box">
  <button type='primary' bindtap="clearStorage">数据清空</button>
</view>

wxss页面

.demo-box{ margin:10px; padding:10rpx; }

js页面

Page({
  data:{
    key:'',
    data:'',
    Fkey:'',
    Fdata:'',
    Rkey:''
  },
  keyInput:function(e){
    this.setData({ key:e.detail.value })
  },
  dataInput:function(e){
    this.setData({ data:e.detail.value })
  },
  FkeyInput: function(e){
    this.setData({ Fkey:e.detail.value })
  },
  RkeyInput: function(e){
    this.setData({ Rkey:e.detail.value })
  },
  //数据的存储
  setStorage:function(e) {
    let key=this.data.key;
    if(key.length == 0) {
      wx.showToast({
        title: 'KEY不能为空',
        icon: 'none'
      })
    }else{
      wx.setStorage({
        data: this.data.data,
        key: key
      })
    }
  },
  //数据的调用
  getStorage: function() {
    var that = this;
    let Fkey=that.data.Fkey;
    if(Fkey.length==0) {
      wx.showToast({
        title: 'KEY不能为空',
        icon:'none'
      })
    }else{
      wx.getStorage({
        key: Fkey, //key是指定的，指本地缓存中指定的key
        success:function(res){
          that.setData({ Fdata:res.data })
        }
      })
    }
  },
  //数据的删除
  removeStorage: function(e){
    let Rkey=this.data.Rkey;
    if(Rkey.length==0) {
      wx.showToast({
        title: 'KEY不能为空',
        icon:'none'
      })
    }else{
      wx.removeStorage({
        key: Rkey,
        success: function(res) {
          wx.showToast({
            title: '删除成功',
            icon: 'none'
          })
        }
      })
    }
  },
  //数据的清空
  clearStorage: function() {
    wx.clearStorage();
    wx.showToast({
      title: '数据已清空',
      icon:'none'
    })
  }
})