微信小程序实现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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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脚本[带参数]的方法
2010/01/22 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python3简单实现串口通信的方法
2019/06/12 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python实现电子词典
2020/03/03 Python
pandas分组聚合详解
2020/04/10 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
秋天的雨教学反思
2014/04/27 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
人生遥控器观后感
2015/06/11 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
Python办公自动化解决world文件批量转换
2021/09/15 Python