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


Posted in Javascript onJune 27, 2019

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

效果图:

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

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

小程序目录结构如下:

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

新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在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 })
  },
 })
 },

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

希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
ES6 class的应用实例分析
Jun 27 #Javascript
ES6 Promise对象的应用实例分析
Jun 27 #Javascript
使用Vue 实现滑动验证码功能
Jun 27 #Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 #Javascript
javascript触发模拟鼠标点击事件
Jun 26 #Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 #Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 #Javascript
You might like
PHP时间戳使用实例代码
2008/06/07 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
使用cx_freeze把python打包exe示例
2014/01/24 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python选择排序算法实例总结
2015/07/01 Python
使用python为mysql实现restful接口
2018/01/05 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
水电站项目建议书
2014/05/12 职场文书
保护环境倡议书范文
2014/05/13 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python