我只想偶尔从API中获取数据(例如,每小时一次),然后将其存储在本地并在我的网站上使用该数据,而无需每次用户刷新浏览器时都一次又一次调用该api。我们如何实现这一目标。我们可以为此目的使用localStorage吗?如果是,那怎么办?
我正在使用这个:
fetch("https://coronavirus-tracker-api.herokuapp.com/deaths")
.then(res=>{
return res.json();
})
.then(data=>{
localStorage.setItem("data",JSON.stringify(data));
console.log(localStorage.getItem("data"))
})
,但这每次页面重新加载时都会调用api。但是,我不想一次又一次地调用api,而是希望将数据存储在localstorage中,并从此处获取要在页面上查看的数据。
答案 0 :(得分:2)
这实际上取决于您要存储的数据量。通常,当您需要处理少量数据时,您倾向于使用localStorage。
还有另一种选择,那就是IndexedDB更合规,并允许您存储更多数据。
您可以在以下位置找到API:https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API 您还可以按照有关IndexedDB的一些教程来了解其实际工作原理。
最后,您可以在此处找到localStorage vs. IndexedDB的使用情况响应:https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-different-from-indexeddb
但是,如果您想使用localStorage进行窃取,则可以在获取数据之前检查是否使用了密钥存储“数据”:
const data = localStorage.getItem('data');
if (!data) {
// then fetch your data
}
请注意,localStorage始终存储“键值”对,并且该值始终是字符串。因此,如果您想在获取价值时处理自己的价值,请不要忘记JSON.parse(data)
修改:重新打开标签页时刷新过时的数据
要每3-4小时更新一次数据,您可以存储获取数据的日期。您需要更新一些信息,但是对诺言结果中响应的处理:
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:在停留在页面上时刷新数据
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();
}
但是您也可以将其与Edit 1中过时的数据检查结合起来。