應用（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'
    })
  }
})