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


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 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
layui实现数据分页功能
Jul 27 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
JS数组方法some、every和find的使用详情
Oct 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
php cookie工作原理与实例详解
2016/07/18 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JS重载实现方法分析
2016/12/16 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
Python中变量交换的例子
2014/08/25 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python pandas库的安装和创建
2019/01/10 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
工地标语大全
2014/06/18 职场文书
医院义诊活动总结
2014/07/04 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
基层党支部承诺书
2015/04/30 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2019秋季运动会口号
2019/06/25 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL