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

Podemos usar el siguiente enfoque en ReactJS para obtener datos de caché únicos. Podemos obtener datos de caché únicos 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 getSingleCacheData que toma el nombre del caché y obtiene sus 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 datos de caché únicos llamados CacheOne 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 single cache data
  const getSingleCacheData = async (cacheName, url) => {
    if (typeof caches === 'undefined') return false;
    
    const cacheStorage = await caches.open(cacheName);
    const cachedResponse = await cacheStorage.match(url);
    
    // If no cache exists
    if (!cachedResponse || !cachedResponse.ok) {
      setCacheData('Fetched failed!')
    }
  
    return cachedResponse.json().then((item) => {
      setCacheData(item)
    });
  };
  
  // Cache Object 
  const cacheToFetch = { cacheName: 'CacheOne', url: 'https://localhost:300' }
  
  return (
    <div style={{ height: 500, width: '80%' }}>
      <h4>How to get single cache data in ReactJS?</h4>
      <button onClick={() => getSingleCacheData(cacheToFetch.cacheName, 
        cacheToFetch.url)} >
        Get Single Cache Data</button>  <br/>
        <h6>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: