小程序模板網(wǎng)

微信小程序之?dāng)?shù)據(jù)緩存

發(fā)布時間:2018-04-23 11:22 所屬欄目:小程序開發(fā)教程

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

效果圖展示: 
這里寫圖片描述 
這里寫圖片描述

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

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)到當(dāng)前頁面</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
        })
      }
    })
  }

})  


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23911.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢