本地?cái)?shù)據(jù)緩存是小程序存儲(chǔ)在當(dāng)前設(shè)備上硬盤(pán)上的數(shù)據(jù)，本地?cái)?shù)據(jù)緩存有非常多的用途，我們可以利用本地?cái)?shù)據(jù)緩存來(lái)存儲(chǔ)用戶(hù)在小程序上產(chǎn)生的操作，在用戶(hù)關(guān)閉小程序重新打開(kāi)時(shí)可以恢復(fù)之前的狀態(tài)。我們還可以利用本地緩存一些服務(wù)端非實(shí)時(shí)的數(shù)據(jù)提高小程序獲取數(shù)據(jù)的速度，在特定的場(chǎng)景下可以提高頁(yè)面的渲染速度，減少用戶(hù)的等待時(shí)間。

小程序提供了讀寫(xiě)本地?cái)?shù)據(jù)緩存的接口，通過(guò)wx.getStorage/wx.getStorageSync讀取本地緩存，通過(guò)wx.setStorage/wx.setStorageSync寫(xiě)數(shù)據(jù)到緩存，其中Sync后綴的接口表示是同步接口，執(zhí)行完畢之后會(huì)立馬返回，示例代碼和參數(shù)說(shuō)明如下所示。

讀取本地緩存

wx.getStorage({

key: \'key1\',

success: function(res) {
    // 異步接口在success回調(diào)才能拿到返回值
    var value1 = res.data
  },
  fail: function() {
    console.log(\'讀取key1發(fā)生錯(cuò)誤\')
  }
})

try{

// 同步接口立即返回值

var value2 = wx.getStorageSync(\'key2\')
}

catch (e) {

console.log(\'讀取key2發(fā)生錯(cuò)誤\')

}

寫(xiě)本地緩存

// 異步接口在success/fail回調(diào)才知道寫(xiě)入成功與否

wx.setStorage({

key:key,

data:value1

success: function() {
    console.log(\'寫(xiě)入value1成功\')

},

fail: function() {
    console.log(\'寫(xiě)入value1發(fā)生錯(cuò)誤\')

}

})

try{

// 同步接口立即寫(xiě)入

wx.setStorageSync(\'key\', \'value2\')
  console.log(\'寫(xiě)入value2成功\')

}catch (e) {
  console.log(\'寫(xiě)入value2發(fā)生錯(cuò)誤\')
}

緩存隔離與限制

小程序宿主環(huán)境會(huì)管理不同小程序的數(shù)據(jù)緩存，不同小程序的本地緩存空間是分開(kāi)的，每個(gè)小程序的緩存空間上限為10MB，如果當(dāng)前緩存已經(jīng)達(dá)到10MB，再通過(guò)wx.setStorage寫(xiě)入緩存會(huì)觸發(fā)fail回調(diào)。
  小程序的本地緩存不僅僅通過(guò)小程序這個(gè)維度來(lái)隔離空間，考慮到同一個(gè)設(shè)備可以登錄不同微信用戶(hù)，宿主環(huán)境還對(duì)不同用戶(hù)的緩存進(jìn)行了隔離，避免用戶(hù)間的數(shù)據(jù)隱私泄露。

由于本地緩存是存放在當(dāng)前設(shè)備，用戶(hù)換設(shè)備之后無(wú)法從另一個(gè)設(shè)備讀取到當(dāng)前設(shè)備數(shù)據(jù)，因此用戶(hù)的關(guān)鍵信息不建議只存在本地緩存，應(yīng)該把數(shù)據(jù)放到服務(wù)器端進(jìn)行持久化存儲(chǔ)。

前端頁(yè)面處理

提交時(shí)保存數(shù)據(jù)

頁(yè)面初始化時(shí)執(zhí)行渲染