微信小程序之数据缓存的实例详解
10多年的卢龙网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整卢龙建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“卢龙网站设计”,“卢龙网站推广”以来，每个客户项目都认真落实执行。
前言：
在H5之前，缓存一般都是用cookie，但是cookie的存储空间太小。于是，H5增加了新的缓存机制，即localstorage 和 sessionstorage，具体的介绍就不在多说。在微信小程序中，数据缓存其实就和localstorage 的原理差不多，所以理解起来并不难。下面我们来一起实现一下。
效果图展示：
我们在index页面存入数字11，然后在跳转到新页面，在将缓存中的11取出渲染到当前页面。具体代码如下：
index页面：
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)
}
})
跳转页面：
跳转页面的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
})
}
})
}
})
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
本文名称：微信小程序之数据缓存的实例详解
URL分享：
http://cdkjz.cn/article/pjecsg.html
