快捷導(dǎo)航

微信小程序之數(shù)據(jù)緩存的實例詳解

更新時間：2017年09月29日 11:45:21 作者：king-w

這篇文章主要介紹了微信小程序之數(shù)據(jù)緩存的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家掌握這部分內(nèi)容，需要的朋友可以參考下

微信小程序之數(shù)據(jù)緩存的實例詳解

前言：

在H5之前，緩存一般都是用cookie，但是cookie的存儲空間太小。于是，H5增加了新的緩存機制，即localstorage 和 sessionstorage，具體的介紹就不在多說。在微信小程序中，數(shù)據(jù)緩存其實就和localstorage 的原理差不多，所以理解起來并不難。下面我們來一起實現(xiàn)一下。

效果圖展示：

我們在index頁面存入數(shù)字11，然后在跳轉(zhuǎn)到新頁面，在將緩存中的11取出渲染到當前頁面。具體代碼如下：

index頁面：

<span style="font-size:24px;">
<view class="btn-area">
 <navigator url="../navigator/navigator?title=我是navi">跳轉(zhuǎn)到新的頁面post情求</navigator>
 <navigator url="../redirect/redirect?title=我是red" redirect>跳轉(zhuǎn)到當前頁面</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
//獲取應(yīng)用實例
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)
 }

})

跳轉(zhuǎn)頁面：

<view>從存儲中得到的數(shù)據(jù):{{storage}}</view>

跳轉(zhuǎn)頁面的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
    })
   }
  })
 }

})

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: