How can I cache the API response?

In the current scenario, We have issue like API getting hits by 10k times and this API we need to call once only after 24hrs.

let configurationsLoaded = false
async function fetch() {
  try {
     // Here we will have the JSON response
    const data = await agent.Core.fetch() 
    if (!Array.isArray(data)) {
      throw new Error('Invalid response (' + JSON.stringify(data) + ')')
    }

    data.forEach(({ Name, Value }) => {
      if (Name.startsWith('url.path.')) {
        config.urls[Name.replace('url.path.', '')] = Value
      } else if (Name.startsWith('kafka.topic.')) {
        config.kafkaTopics[Name.replace('kafka.topic.', '')] = Value
      }
    })

    configurationsLoaded = Object.keys(config.urls).length > 0
    if (configurationsLoaded) {
      configurationsLoadedTime = Date.now()
    }
  } catch (error) {
    configurationsLoaded = false
    showToastMessage('Failed to fetch app configurations: ' + error.message)
    return console.error('Failed to fetch app configurations', error)
  }
}

Do we need to use LocalStorage API's for caching a data? because I have read in many articles even after encryption of the data. It's not safe! Or Can we use Browser's Cache API? https://developer.mozilla.org/en-US/docs/Web/API/Cache

Also we have use 'superagent-bluebird-promise' npm package, So can we use interceptor to cache the call?

What will be the best approach we can use here to persist data for 24hrs and call it after every 24hrs of time.

P.S I'm not asking for the code, but if any one could give me a steps to transform into a result would be a great help! Thanks in advance!