微信小程序框架提供豐富的微信原生API载碌，可以方便的調(diào)起微信提供的能力，如獲取用戶信息衅枫，本地存儲(chǔ)嫁艇，支付功能等。
本文主要說(shuō)明數(shù)據(jù)緩存
每個(gè)微信小程序都可以有自己的本地緩存
在進(jìn)行ajax請(qǐng)求時(shí)
可以通過(guò)
wx.setStorage（異步本地存儲(chǔ)數(shù)據(jù)）弦撩、
wx.setStorageSync(同步本地存儲(chǔ)數(shù)據(jù))步咪、
wx.getStorage（異步使用本地?cái)?shù)據(jù)）、
wx.getStorageSync（同步使用本地?cái)?shù)據(jù)）益楼、
wx.clearStorage（異步清理本地?cái)?shù)據(jù)緩存）
wx.clearStorageSync（同步清理本地?cái)?shù)據(jù)緩存）
對(duì)本地緩存進(jìn)行設(shè)置猾漫、獲取和清理。同一個(gè)微信用戶感凤，同一個(gè)小程序 storage 上限為 10MB悯周。
wx.setStorage(OBJECT)
將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容陪竿，這是一個(gè)異步接口禽翼。
OBJECT參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 必填 | 說(shuō)明 |
|---|---|---|---|
| key | String | 是 | 本地緩存中的指定的 key |
| data | Object/String | 是 | 需要存儲(chǔ)的內(nèi)容 |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） |
示例代碼：
wx.setStorage({
key:"key",
data:"value"
})
wx.setStorageSync(KEY,DATA)
將 data 存儲(chǔ)在本地緩存中指定的 key 中族跛，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容闰挡，這是一個(gè)同步接口。
參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 必填 | 說(shuō)明 |
|---|---|---|---|
| key | String | 是 | 本地緩存中的指定的 key |
| data | Object/String | 是 | 需要存儲(chǔ)的內(nèi)容 |
示例代碼
try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
wx.getStorage(OBJECT)
從本地緩存中異步獲取指定 key 對(duì)應(yīng)的內(nèi)容礁哄。
OBJECT參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 必填 | 說(shuō)明 |
|---|---|---|---|
| key | String | 是 | 本地緩存中的指定的 key |
| success | Function | 是 | 接口調(diào)用的回調(diào)函數(shù),res = {data: key對(duì)應(yīng)的內(nèi)容} |
| fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功长酗、失敗都會(huì)執(zhí)行） |
success返回參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 說(shuō)明 |
|---|---|---|
| data | String | key對(duì)應(yīng)的內(nèi)容 |
示例代碼：
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
wx.getStorageSync(KEY)
從本地緩存中同步獲取指定 key 對(duì)應(yīng)的內(nèi)容。
參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 必填 | 說(shuō)明 |
|---|---|---|---|
| key | String | 是 | 本地緩存中的指定的 key |
代碼示例&解析
wx.showNavigationBarLoading();導(dǎo)航條加載動(dòng)畫(huà)
wx.showLoading({ title: '玩命加載中', mask: true })界面加載動(dòng)畫(huà)桐绒，title加載動(dòng)畫(huà)的提示語(yǔ)夺脾，mask透明蒙層之拨，防止觸摸穿透
let data1 = wx.getStorageSync("hotMovie");把存儲(chǔ)到本地的數(shù)據(jù)異步賦值給data1，方便后續(xù)使用
onLoad: function() {
wx.showNavigationBarLoading();
wx.showLoading({
title: '玩命加載中',
mask: true
})
var that = this;
let data1 = wx.getStorageSync("hotMovie");
if(data1){//判斷data1是否有數(shù)據(jù)咧叭，若有直接that.setData({ })定義
wx.hideNavigationBarLoading();
wx.hideLoading();
// console.log(res);
that.setData({
imgUrls: data1.slice(0, 2),
imgkey: data1.slice(0, 2),
info: data1.slice(0, 2),
file: data1.slice(0, 2)
})
}else{//若無(wú)
wx.request({//進(jìn)行ajax請(qǐng)求
url: 'https://www.easy-mock.com/mock/5b28c8793f9f7c0b22426dce/example/hotmovie',
success(res) {
wx.setStorage({//將請(qǐng)求成功的數(shù)據(jù)異步存儲(chǔ)到本地
key: 'hotMovie',
data: res.data.subjects
})
}
});
};
}
使用if(){}else{}判斷并且將數(shù)據(jù)存儲(chǔ)到本地的優(yōu)點(diǎn)敦锌，使小程序把請(qǐng)求到的數(shù)據(jù)存儲(chǔ)到本地，然后進(jìn)行判斷佳簸，有數(shù)據(jù)則不再請(qǐng)求乙墙，無(wú)數(shù)據(jù)則請(qǐng)求一次，存儲(chǔ)到本地即可生均，用戶體驗(yàn)度更高听想，界面無(wú)需刷新即可獲取數(shù)據(jù)，操作更流暢马胧。
