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


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 相关文章推荐
一个简单的js动画效果代码
Jul 20 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
JavaScript函数基础详解
Feb 03 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
js DOM的事件常见操作实例详解
Dec 16 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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
全文搜索和替换
2006/10/09 PHP
PHP strtotime函数详解
2009/12/18 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
python 如何引入协程和原理分析
2020/11/30 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
销售个人求职信范文
2014/04/28 职场文书
个性婚礼策划方案
2014/05/17 职场文书
公司活动总结范文
2014/07/01 职场文书
小学生安全责任书
2014/07/25 职场文书
教师节学生演讲稿
2014/09/03 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android