微信小程序实现form表单本地储存数据
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现form表单本地储存数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现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 })
},
})
},
以上就是完整的表单登陆加储存。
希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。