微信小程序之数据缓存的实例详解     -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

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