微信小程序之数据缓存的实例详解
时间：2022-08-09 08:32:23|栏目：JavaScript代码|点击： 次
微信小程序之数据缓存的实例详解
前言：
在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
})
}
})
}
})
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
上一篇：Bootstrap datepicker日期选择器插件使用详解
栏 目：JavaScript代码
下一篇：JS验证邮件地址格式方法小结
本文标题：微信小程序之数据缓存的实例详解
本文地址：http://www.codeinn.net/misctech/210286.html
