微信小程序实现form表单本地储存数据

微信(小程序)  /  管理员 发布于 3年前   182

本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码，供大家参考，具体内容如下

效果图：

主要利用小程序的getStorage来实现异步本地储存。

小程序目录结构如下：

新建项目前，为了简化操作可直接右键新建目录，这样建出来的文件会直接写在app.json中，无需手动添加。

login.wxml代码：

 
   姓名:      密码:      登陆  

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

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

希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
• 微信小程序使用form表单获取输入框数据的实例代码
• 微信小程序简单实现form表单获取输入数据功能示例