微信小程序實現form表單本地儲存數據

<!--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>

/* 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;
}

// 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: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 })
 },
 })
 },