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

网络编程 2021-07-04 15:51www.168986.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: #c;
 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',
  suess: function(res) {
  that.setData({ userName: res.data })
  },
 })
 wx.getStorage({
  key: 'passWord',
  suess: function (res) {
  console.log(res.data)
  that.setData({ passWord: res.data })
  },
 })
 },

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

希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by