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

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

讀取本地緩存

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ò)誤\')

}

寫本地緩存

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

wx.setStorage({

key:key,

data:value1

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

},

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

}

})

try{

// 同步接口立即寫入

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

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

緩存隔離與限制

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

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

前端頁面處理

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

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