微信小程序简单的form表单本地储存数据

效果图：

主要利用小程序的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 })
      },
    })
  },

以上就是完整的表单登陆加储存。