Javascript 如何使用本地存储存储API中的数据

我只想每隔一段时间（比如每小时一次）从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中，并从那里获取要在页面上查看的数据。

这实际上取决于要存储的数据量。通常，当需要处理少量数据时，您更喜欢使用localStorage

另一种选择也是可能的，它是IndexedDB，它更兼容，允许您存储更多数据

您可以在此处找到API： 您还可以按照一些关于IndexedDB的教程了解它的实际工作原理

最后，您可以在此处找到localStorage vs.IndexedDB使用响应：

但是，如果要使用localStorage，则可以在获取数据之前检查是否使用了密钥存储“data”：

const data=localStorage.getItem（'data'）；
如果（！数据）{
//然后获取您的数据
}

请注意，localStorage始终存储键值对，并且值始终是字符串。因此，如果您想在检索时处理您的值，请不要忘记

JSON.parse（data）

编辑：重新打开选项卡时刷新过期数据

要每3-4小时更新一次数据，可以存储获取数据的日期。您需要更新一点，但承诺结果中对您的回答的处理：

const getDataFromLocalStorage=（）=>{
const datastringfied=localStorage.getItem（'data'）；
返回数据&JSON.parse（datastringfied）| | null；
};
常数aredataoutlated=（receivedAt）=>{
如果（！dataReceivedAt | | isNaN（Date.parse（receivedAt））{
返回true；
}
//基本上，我们以实际日期为准，去掉了4个小时
const checkDate=新日期（new Date（）.getTime（）-（60*60*4*1000））；
//如果收到的数据低于检查日期，则表示数据已过时。
返回新日期（receivedAt.getTime（）{
//与其直接存储响应，不如构造一个同时存储日期的对象
setItem（“data”，JSON.stringify（{response:res.JSON（），receivedAt:new Date（）}））；
console.log（localStorage.getItem（“数据”））
})
}

编辑2：在页面上刷新数据

const getDataFromLocalStorage=（）=>{
const datastringfied=localStorage.getItem（'data'）；
返回数据&JSON.parse（datastringfied）| | null；
};
常量fetchData=（）=>{
取回（“https://coronavirus-tracker-api.herokuapp.com/deaths")
。然后（res=>{
//与其直接存储响应，不如构造一个同时存储日期的对象
setItem（“data”，JSON.stringify（{response:res.JSON（），receivedAt:new Date（）}））；
console.log（localStorage.getItem（“数据”））
})
}
设置间隔（（）=>{
fetchData（）；
}，1000*60*60*4）//每4小时，我们将获取数据。
const data=getDataFromLocalStorage（）；
如果（！数据）{
fetchData（）；
}

---

但是你也可以结合编辑1中的过时数据检查。

请提供一些你到目前为止尝试过的例子。@AndrésMuñoz制作了编辑，但此更新仅在你重新打开或刷新选项卡时有效，如果你停留在页面上，它将不会自动刷新，你需要一个setInterval，因为这是setInterval更好的选择那么？如果我使用setInterval而不是上面使用Date提供的代码，会降低页面的性能吗？如果它充当“仪表板”，这取决于页面的目标而且你总是对它无所事事，setInterval确实是一个更好的解决方案。我会添加它。你会在编辑2中找到带有setInterval的解决方案。但是如果你需要这两个选项，你可以同时使用这两个解决方案；）