微信小程序实现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 到 JQuery (1)学习小结
Feb 12 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
用node.js写一个jenkins发版脚本
May 21 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
python中使用zip函数出现错误的原因
2018/09/28 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python argparse模块使用方法解析
2020/02/20 Python
keras 多任务多loss实例
2020/06/22 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
劳资协议书范本
2014/04/23 职场文书
宣传稿格式范文
2015/07/23 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
浅析Python中的随机采样和概率分布
2021/12/06 Python