微信小程序数据存储与取值详解


Posted in Javascript onJanuary 30, 2018

在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值。

比如:

微信小程序数据存储与取值详解

微信小程序数据存储与取值详解

在A页面input输入框,输入电话号码,点击添加。需要在B页面电话区域中,显示刚刚输入的电话号码。

因为这是两个页面,就需要先存储,再取值。微信小程序提供了数据存储的API,wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容。

思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮时,如果变量不为空,将变量的值存储在本地缓存中,在B页面,使用wx.getStorage(OBJECT) 方法取值;

ps : 源代码在页面底部

代码如下:

微信小程序数据存储与取值详解

对input输入框,绑定事件bindinput="bindKeyInput" ,设置value="{{inputValue}}" ,因为电话号码为数字,设置type="number" 。对按钮添加点击事件bindtap="addbtn"

在JS文件中添加代码

微信小程序数据存储与取值详解

B页面代码

微信小程序数据存储与取值详解

在JS文件中,声明变量addtel。在页面切换过来的时候,取出我们刚存储的值,赋值给变量addtel。在需要显示电话号码的地方,用变量来接收。

在JS文件中添加代码

data:{
  addtel : ''
}

微信小程序数据存储与取值详解

这里在onShow的方法中进行取值,当小程序启动,或从后台进入前台显示,就会触发 onShow。

不过,每个微信小程序都可以有自己的本地缓存,使用这些方法时,要注意本地缓存最大为10MB,wx.setStorage(wx.setStorageSync)wx.getStorage(wx.getStorageSync)可以对本地缓存进行设置、获取和清理。。

也可以使用wx.clearStorage(wx.clearStorageSync)来清理缓存。

代码写完之后,进行测试。

微信小程序数据存储与取值详解

在输入框中输入电话号码,点击添加。

微信小程序数据存储与取值详解

OK,取值成功。

A页面源代码:

<view class="add-page">
  <input placeholder="输入手机号添加客户" type="number" bindinput="bindKeyInput" value="{{inputValue}}" />
   <button type="warn" class="add-btn" bindtap="addbtn" >添加</button>
</view>
var app = getApp()
Page({
 data: {
  inputValue:''
 },
 bindKeyInput:function(e){
  this.setData({
   inputValue: e.detail.value
  })
 },
 addbtn:function(){
   if(this.data.inputValue){
    wx.redirectTo({
     url: '../ordered/ordered'
    })
    wx.setStorage({
     key:"addTel",
     data:this.data.inputValue
    })
   }else{
    wx.showModal({
     title: '手机号为空',
     content: '请输入手机号码',
     success: function(res) {
      if (res.confirm) {
       console.log('用户点击确定')
      }
     }
    })
   }
 },
 onload:function(){
  //onload
 }

})

B页面源代码:

<view class="menu-item">
 <navigator class="menu-item-main" >
   <text class="menu-item-name">电话</text>
   <view class="ordtel">
    <text class="ordtext">{{addtel}}</text>
    <image class="menu-item-icon"  src="/image/tel.png"></image>
   </view>      
 </navigator>
</view>
var app = getApp()
Page({
  data:{
    addtel : ''
  },
  onShow:function(){
  var that = this;
  wx.getStorage({
   key: 'addTel',
   success: function(res) {
     console.log(res.data)
     that.setData({
      addtel:res.data
     })
   } 
  })
 }
})

其他相关资料可以查阅小程序官方API。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
Vue精简版风格概述
Jan 30 #Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 #Javascript
vue2.0之多页面的开发的示例
Jan 30 #Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 #Javascript
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
5 种JavaScript编码规范
Jan 30 #Javascript
vue源码入口文件分析(推荐)
Jan 30 #Javascript
You might like
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
js 操作符实例代码
2009/10/24 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python中统计函数运行耗时的方法
2015/05/05 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python处理Excel文件实例代码
2017/06/20 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
班子个人四风问题整改措施
2014/10/04 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
redis 限制内存使用大小的实现
2021/05/08 Redis
浅谈克隆 JavaScript
2021/11/02 Javascript