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


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 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
详解Python中的多线程编程
2015/04/09 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python抖音表白程序源代码
2019/04/07 Python
python用requests实现http请求代码实例
2019/10/31 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
英语感恩演讲稿
2014/01/14 职场文书
英语商务邀请函范文
2014/01/16 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python