Как использовать локальное хранилище для хранения данных из API

Question

Я хочу получать данные из 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, я хочу сохранить данные в локальном хранилище и получить данные для просмотра на странице оттуда.

Answer 1

Это зависит от того, какое количество данных вы хотите сохранить. Обычно вы предпочитаете использовать localStorage, когда вам нужно иметь дело с небольшим объемом данных.

Возможна и другая альтернатива, это IndexedDB, которая более совместима и позволяет хранить больше данных.

Вы можете найти API здесь: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API Вы также можете следовать некоторым учебникам по IndexedDB, чтобы увидеть, как на самом деле он работает.

Наконец, вы можете найти ответ об использовании localStorage и IndexedDB здесь: https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-different-from-indexeddb

Но если вы хотите украсть, используйте localStorage, тогда вы можете проверить, прежде чем извлекать ваши данные, если используется хранилище ключей «data»:

const data = localStorage.getItem('data');

if (!data) {
 // then fetch your data
}

Будьте внимательны, localStorage всегда хранит пары Key Value, и значение всегда будет строкой. Поэтому, если вы хотите иметь дело со своим значением при получении, не забудьте JSON.parse(data)

Редактировать: обновить sh данные устаревшие при повторном открытии вкладки

Чтобы обновлять данные каждые 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: Обновить sh данные, оставаясь на странице

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.