我要评论微信小程序之数据缓存的实例详解
前言：
在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
})
}
})
}
})
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论