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


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 相关文章推荐
JS读取cookies信息(记录用户名)
Jan 10 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
iview实现图片上传功能
Jun 29 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
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
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
用 python 进行微信好友信息分析
2020/11/28 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
公司合作协议书范本
2014/04/18 职场文书
事业单位考察材料范文
2014/12/25 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
学习心理学心得体会
2016/01/22 职场文书