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

效果图：

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

小程序目录结构如下：

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

login.wxml代码：

！-页面/登录/登录。wxml-view class=' container '表单绑定提交=' submit ' view class=' row '文本姓名：/文本输入类型='文本'名称='用户名'占位符='请输入姓名value=' { { userName } } '//view view class=' row ' text密码：/文本输入类型='密码'名称=' passWord '占位符='请输入密码value=' { { PassPort } } '//view view button form-type=' submit ' type=' primary '登陆/按钮/视图/表单/视图登录。页面样式表样式：

/* pages/login/login.wxss */.容器{ padd : 1 rem font-size : 0.9 rem；线高： 1.5雷姆；边框-shadow : 1px 1px # 0099 cc；}.行{ display : flex align-items :居中；保证金-底部： 0.8雷姆；}.行文本{ flex-grow : 1；文本对齐：右侧；}.行输入{ font-size : 0.7 remcolor : # cccf lex-grow : 3；border: 1px固体# 0099CCdisplay:内联块；边界半径：0.3微米；盒影： 0 0.15雷姆# AAApadding: 0.3rem }。行按钮{ padding: 0 2rem }重点login.js来了：

//页面/登录/登录。js页面({/* * *页面的初始数据*/data: {用户名： ' ',密码：'' },/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ },/** *生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharappmessage :函数(){ }})点击登陆时，触发使服从函数，如下：

提交：功能(e){控制台。日志(例如详细信息。值)；//表单数据var Objdata=e . detail。价值；if(Objdata。用户名Objdata。PassPort){//异步方式储存表单数据wx。setstorage({ key : ' userName '，data: objData.userName，})wx。set storage({ key : ' PassPort '，data: objData.passWord，})wx。导航到({ URL : './detail/detail '，}) } }，储存好数据后，下次再打开该页面，先判断是否含有数据，有就填充。

onLoad:函数（选项){ var=this wx。getstorage({键： '用户名'，成功：函数{那个。setdata({ userName : RES . data })}，})wx。getstorage({ key : ' passWord '，成功3360函数(RES){控制台。记录数据。setdata({ passWord 3360 RES . data })}，})，以上就是完整的表单登陆加储存。

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