微信小程序实现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 Base类 包含基本的方法
Jul 22 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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添加MySQL数据记录代码
2008/06/07 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
农村婚礼证婚词
2014/01/08 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
出生医学证明书
2014/09/15 职场文书
政风行风整改报告
2014/11/06 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Django程序的优化技巧
2021/04/29 Python
Vue详细的入门笔记
2021/05/10 Vue.js
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers