微信小程序实现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 Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
vue.js路由跳转详解
Aug 28 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
小程序实现列表删除功能
Oct 30 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 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调用数据库的存贮过程!
2006/10/09 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
工商管理实习自我鉴定
2013/09/28 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
新教师教学工作总结
2015/08/14 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis