微信小程序之数据缓存的实例详解


Posted in Javascript onSeptember 29, 2017

微信小程序之数据缓存的实例详解

前言:

在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小。于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说。在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难。下面我们来一起实现一下。

效果图展示:

微信小程序之数据缓存的实例详解

微信小程序之数据缓存的实例详解

我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面。具体代码如下:

index页面:

<span style="font-size:24px;">
<view class="btn-area">
 <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面post情求</navigator>
 <navigator url="../redirect/redirect?title=我是red" redirect>跳转到当前页面</navigator>
</view>
</span>
<view>
 <input style="border:2rpx solid red" placeholder="输入信息" bindinput="getInput" />
 <button style="border:2rpx solid yellow" bindtap="saveInput">存入</button>
</view>

index的js:

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  storage:''
 },
 onLoad: function () {
  var that = this

 //获取输入值
 getInput:function(e){
  this.setData({
   storage:e.detail.value
  })
 },
 //存储输入值
 saveInput:function(){
  wx.setStorageSync('storage', this.data.storage)
 }

})

跳转页面:

<view>从存储中得到的数据:{{storage}}</view>

跳转页面的js:

var app = getApp();
var that; 
Page( { 
 data: {  
  storage:''
 }, 
 onLoad: function(options) { 
  that = this; 
  //获取存储信息
  wx.getStorage({
   key: 'storage',
   success: function(res){
    // success
    that.setData({
     storage:res.data
    })
   }
  })
 }

})

 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
JavaScript的==运算详解
Jul 20 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
微信小程序实现文字无限轮播效果
Dec 28 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 #Javascript
微信小程序中setInterval的使用方法
Sep 29 #Javascript
vue生成随机验证码的示例代码
Sep 29 #Javascript
JS设计模式之单例模式(一)
Sep 29 #Javascript
微信小程序的日期选择器的实例详解
Sep 29 #Javascript
JS设计模式之惰性模式(二)
Sep 29 #Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 #Javascript
You might like
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
图片自动缩小 点击放大
2008/07/07 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python实现学校管理系统
2018/01/11 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python matplotlib实时画图案例
2020/04/23 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
python实现磁盘日志清理的示例
2020/11/05 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
护士节策划方案
2014/05/19 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015年班干部工作总结
2015/04/29 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang