建站资讯

微信小程序经营_微信小程序之数据缓存的实例详

作者:admin 发布时间:2021-01-11
微信小程序之数据缓存的实例详解     -w   这篇文章主要介绍了微信小程序之数据缓存的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这部分内容,需要的朋友可以参考下

前言:

在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小。于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说。在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难。下面我们来一起实现一下。

效果图展示:

我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面。具体代码如下:

index页面:

 span 
 view 
 navigator url="../navigator/navigator title=我是navi" 跳转到新的页面post情求 /navigator 
 navigator url="../redirect/redirect title=我是red" redirect 跳转到当前页面 /navigator 
 /view 
 /span 
 view 
 input placeholder="输入信息" bindinput="getInput" / 
 button 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

 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!



收缩