微信小程序API 之 本地缓存进行页面传递数据 （3）

利用本地缓存进行页面间传递数据 （wx.getStorage,wx.setStorage）

以一个快递预约为例，两个页面index,logs。
将index中提交的数据在logs中显示出来。需要用到数据缓存API，具体操作如下：
关键代码：

异步存：

    var orderInfo = event.detail.value;
    wx.setStorage({
      key: 'orderInfo',
      data: orderInfo,
      success: function (res) {
        wx.navigateTo({
          url: '../logs/logs'
        })
      }
    })
  }

异步取：

onLoad: function () {
    var that = this;
    wx.getStorage({
      key: 'orderInfo',
      success: function (res) {
        that.setData({
          orderInfo: res.data
        })
      }
    })
  }

一、index.wxml

  <form bindsubmit="submitdate">
      <view class="order">
        <view class="date">
          <input name="date" placeholder="请输入预定的日期....." placeholder-style="color:#eee" />
        </view>
        <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
        <view class="date">
          <input name="username" placeholder="请输入预定的人....." placeholder-style="color:#eee" />
        </view>
        <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
        <view class="date">
          <input name="telpho" placeholder="请输入预定电话....." placeholder-style="color:#eee" />
        </view>
        <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
        <view class="date">
          <input name="address" placeholder="请输入预定的地址....." placeholder-style="color:#eee" />
        </view>
        <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
        <view class="date">
          <input name="other" placeholder="请输入预定的其他信息....." placeholder-style="color:#eee" />
        </view>
        <view class="hr" style="margin-top:20rpx;margin-bottom:20rpx;"></view>
        <button form-type="submit">确认提交</button>
      </view>
    </form>

index.js

index.js
//获取应用实例
var app = getApp()
Page({
  data: {
  },
  //事件处理函数
  submitdate: function (event) {
    var orderInfo = event.detail.value;
    wx.setStorage({
      key: 'orderInfo',
      data: orderInfo,
      success: function (res) {
        wx.navigateTo({
          url: '../logs/logs'
        })
      }
    })
  }
})

二、logs.wxml

logs.wxml
<view class="content">
  <view class="classname">预约信息</view>
  <view class="classname">预约日期：
    <text>{{orderInfo.date}}</text>
  </view>
  <view class="classname">联系人姓名：
    <text>{{orderInfo.username}}</text>
  </view>
  <view class="classname">联系人电话：
    <text>{{orderInfo.telpho}}</text>
  </view>
  <view class="classname">联系人地址：
    <text>{{orderInfo.address}}</text>
  </view>
  <view class="classname">其他备注信息：
    <text>{{orderInfo.other}}</text>
  </view>
</view>

logs.js

Page({
  data: {
    orderInfo: {}
  },
  onLoad: function () {
    var that = this;
    wx.getStorage({
      key: 'orderInfo',
      success: function (res) {
        that.setData({
          orderInfo: res.data
        })
      }
    })
  }
})