¿Cómo obtener datos de caché completos en ReactJS?

Podemos usar el siguiente enfoque en ReactJS para obtener todos los datos de caché. Podemos obtener todos los datos de caché del navegador y usarlos en nuestra aplicación cuando sea necesario. ese navegador

para obtener datos de caché en ReactJS. Hemos creado nuestra función getAllCacheData que obtiene todos los datos del caché del navegador. Cuando hacemos clic en el botón, la función se activa y los datos se recuperan del caché. En el siguiente ejemplo, intentamos obtener todos los datos de caché del navegador que tiene cinco cachés llamados CacheOne, CacheTwo, CacheThree, CacheFour y CacheFive, como se muestra a continuación:

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import * as React from 'react';
  
export default function App() {
  
  // Our state to store fetched cache data
  const [cacheData, setCacheData] = React.useState();
  
  // Function to get all cache data
  const getAllCacheData = async () => {
    var url = 'https://localhost:300'
  
    // List of all caches present in browser
    var names = await caches.keys()
  
    var cacheDataArray = []
  
    // Iterating over the list of caches
    names.forEach(async(name) => {
  
      // Opening that particular cache
      const cacheStorage = await caches.open(name);
  
      // Fetching that particular cache data
      const cachedResponse = await cacheStorage.match(url);
      var data = await cachedResponse.json()
  
      // Pushing fetched data into our cacheDataArray
      cacheDataArray.push(data)
      setCacheData(cacheDataArray.join(', '))
    })
  };
  
  return (
    <div style={{ height: 500, width: '80%' }}>
      <h4>How to get all cache data in ReactJS?</h4>
      <button onClick={() => getAllCacheData()} >
        Get All Cache Data</button>  <br />
      <h6>All Cache Data is: {cacheData}</h6>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: