這實(shí)際上取決于您要存儲(chǔ)的數(shù)據(jù)量。通常，當(dāng)您需要處理少量數(shù)據(jù)時(shí)，您更喜歡使用 localStorage。
另一種選擇也是可能的，它是 IndexedDB，它更兼容并且允許您存儲(chǔ)更多數(shù)據(jù)。
但是如果你想竊取使用 localStorage，那么你可以在獲取數(shù)據(jù)之前檢查是否使用了密鑰存儲(chǔ)“數(shù)據(jù)”：
const data = localStorage.getItem('data');
if (!data) {
?// then fetch your data
}
請(qǐng)注意，localStorage 始終存儲(chǔ)鍵值對(duì)，并且值始終是字符串。因此，如果您想在檢索值時(shí)處理它，請(qǐng)不要忘記JSON.parse(data)
編輯：重新打開選項(xiàng)卡時(shí)刷新過(guò)時(shí)的數(shù)據(jù)
要每 3-4 小時(shí)更新一次數(shù)據(jù)，您可以存儲(chǔ)獲取數(shù)據(jù)的日期。您需要更新一點(diǎn)，但對(duì)承諾結(jié)果中的響應(yīng)的處理：
const getDataFromLocalStorage = () => {
? const dataStringified = localStorage.getItem('data');
? return data && JSON.parse(dataStringified) || null;
};
const areDataOutdated = (receivedAt) => {
? ? if (!dataReceivedAt || isNaN(Date.parse(receivedAt)) {
? ? ? ?return true;
? ? }
? ? // Basically, we take the actual date, and we removed 4 hours
? ? const checkDate = new Date(new Date().getTime() - (60 * 60 * 4 * 1000));
? ? // If the data received is lower than the checkDate, it means that data are outdated.
? ? return new Date(receivedAt).getTime() < checkDate.getTime();
};
const data = getDataFromLocalStorage();
if (!data || areDataOutdated(data && data.receivedAt)) {
? ?// then fetch your data
? ?fetch("https://coronavirus-tracker-api.herokuapp.com/deaths")
? ? ?.then(res=> {
? ? ? ?// instead of storing directly your response, construct a object that will store also the date
? ? ? ?localStorage.setItem("data", JSON.stringify({response: res.json(), receivedAt: new Date()}));
? ? ? ?console.log(localStorage.getItem("data"))
? ? ?})
}
編輯2：停留在頁(yè)面上時(shí)刷新數(shù)據(jù)
const getDataFromLocalStorage = () => {
? const dataStringified = localStorage.getItem('data');
? return data && JSON.parse(dataStringified) || null;
};
const fetchData = () => {
? fetch("https://coronavirus-tracker-api.herokuapp.com/deaths")
? ? ?.then(res=> {
? ? ? ?// instead of storing directly your response, construct a object that will store also the date
? ? ? ?localStorage.setItem("data", JSON.stringify({response: res.json(), receivedAt: new Date()}));
? ? ? ?console.log(localStorage.getItem("data"))
? ? ?})
}
setInterval(() => {
? ?fetchData();
}, 1000 * 60 * 60 * 4) // every 4 hours, we'll fetch the data.
const data = getDataFromLocalStorage();
if (!data) {
? ?fetchData();
}
但您也可以結(jié)合編輯 1 中的過(guò)時(shí)數(shù)據(jù)檢查。
