本文實例為大家分享了微信小程序實現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.jsPage({ /** * 頁面的初始數據 */ 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 }) }, }) },以上就是完整的表單登陸加儲存。
希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
