快捷導(dǎo)航

微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解

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

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

微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解

前言：

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

效果圖展示：

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

index頁(yè)面：

<span style="font-size:24px;">
<view class="btn-area">
 <navigator url="../navigator/navigator?title=我是navi">跳轉(zhuǎn)到新的頁(yè)面post情求</navigator>
 <navigator url="../redirect/redirect?title=我是red" redirect>跳轉(zhuǎn)到當(dāng)前頁(yè)面</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)用實(shí)例
var app = getApp()
Page({
 data: {
  storage:''
 },
 onLoad: function () {
  var that = this

 //獲取輸入值
 getInput:function(e){
  this.setData({
   storage:e.detail.value
  })
 },
 //存儲(chǔ)輸入值
 saveInput:function(){
  wx.setStorageSync('storage', this.data.storage)
 }

})

跳轉(zhuǎn)頁(yè)面：

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

跳轉(zhuǎn)頁(yè)面的js：

var app = getApp();
var that; 
Page( { 
 data: {  
  storage:''
 }, 
 onLoad: function(options) { 
  that = this; 
  //獲取存儲(chǔ)信息
  wx.getStorage({
   key: 'storage',
   success: function(res){
    // success
    that.setData({
     storage:res.data
    })
   }
  })
 }

})

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

您可能感興趣的文章: