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


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网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 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下封装较好的数字分页方法
2010/11/23 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
php绘制一条直线的方法
2015/01/24 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
javascript 日期常用的方法
2009/11/11 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
js闭包的用途详解
2014/11/09 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
python regex库实例用法总结
2021/01/03 Python
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
学生操行评语大全
2014/04/24 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
闪闪红星观后感
2015/06/08 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python