您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍微信小程序如何实现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 })
},
})
},以上是“微信小程序如何实现form表单本地储存数据”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。