效果圖：

主要利用小程式的getStorage來實現非同步本地儲存。

小程式目錄結構如下：

新建專案前，為了簡化操作可直接右鍵新建目錄，這樣建出來的檔案會直接寫在app.json中，無需手動新增。

login.wxml程式碼：

<!--pages/login/login.wxml-->
<view class='container'>
  <form bindsubmit='submit'>
    <view class='row'>
      <text>姓名:</text>
      <input type='text' name='userName' placeholder='請輸入姓名' value='{{userName}}'/>
    </view>
    <view class='row'>
      <text>密碼:</text>
      <input type='password' name='passWord' placeholder='請輸入密碼' value='{{passWord}}'/>
    </view>
    <view>
      <button form-type='submit' type='primary'>登陸</button>
    </view>
  </form>
</view>
 

login.wxss樣式：

/* pages/login/login.wxss */
.container{
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.5rem;
    border-shadow: 1px 1px #0099CC;
}
.row{
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}
.row text{
    flex-grow: 1;
    text-align: right;
}
.row input{
    font-size: 0.7rem;
    color: #ccc;
    flex-grow: 3;
    border: 1px solid #0099CC;
    display: inline-block;
    border-radius: 0.3rem;
    box-shadow: 0 0 0.15rem #aaa;
    padding: 0.3rem;
}
.row button{
    padding: 0 2rem;
}
 

重點login.js來了：

// pages/login/login.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    userName:'',
    passWord:''
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
   
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
  
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
  
  }
})
 

點選登陸時，觸發submit函式，如下：

submit:function(e){
    console.log(e.detail.value);
    //表單資料
    var objData = e.detail.value;
    if (objData.userName && objData.passWord){
      //非同步方式儲存表單資料
      wx.setStorage({
        key: 'userName',
        data: objData.userName,
      })
      wx.setStorage({
        key: 'passWord',
        data: objData.passWord,
      })
      wx.navigateTo({
        url: '../detail/detail',
      })
    }
   
  },

儲存好資料後，下次再開啟該頁面，先判斷是否含有資料，有就填充。

 onLoad: function (options) {
    var that = this
    wx.getStorage({
      key: 'userName',
      success: function(res) {
        that.setData({ userName: res.data })
      },
    })
    wx.getStorage({
      key: 'passWord',
      success: function (res) {
        console.log(res.data)
        that.setData({ passWord: res.data })
      },
    })
  },