如何使用本地存储来存储来自API的数据

时间:2020-04-21 06:46:22

标签: javascript html api local-storage

我只想偶尔从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中,并从此处获取要在页面上查看的数据。

1 个答案:

答案 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中过时的数据检查结合起来。