¿Cómo almacenar múltiples datos de caché en ReactJS?

Podemos usar el siguiente enfoque en ReactJS para almacenar múltiples datos de caché en ReactJS . Podemos almacenar múltiples datos de caché en el navegador y usarlos en nuestra aplicación cuando sea necesario. El almacenamiento en caché es una técnica que nos ayuda a almacenar una copia de un recurso determinado en nuestro navegador y la devuelve cuando se solicita.

Enfoque: siga estos sencillos pasos para almacenar varios datos de caché en ReactJS. Hemos creado nuestra función addMultipleCacheData que toma la lista de datos del usuario y la almacena en la memoria caché del navegador. Cuando hacemos clic en el botón, la función se activa y los datos se almacenan en el caché, y vemos una ventana emergente de alerta. En el siguiente ejemplo, intentamos almacenar varios cachés llamados CacheOne, CacheTwo y CacheThree usando nuestra función definida.

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 , muévase a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: 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.

Aplicación.js

import * as React from 'react';

export default function App() {

  // Function to add our give multiple cache data
  const addMultipleCacheData = async (cacheList) => {

    for (var i = 0; i < cacheList.length; i++) {
      // Converting our respons into Actual Response form
      const data = new Response(JSON.stringify(cacheList[i].cacheData));

      if ('caches' in window) {
        // Opening given cache and putting our data into it
        var cache = await caches.open(cacheList[i].cacheName)
        cache.put(cacheList[i].url, data);
      }
    }
    alert('Multiple Cache Stored!')
  };

  const CacheToBeStored = [
    { cacheName: 'CacheOne', cacheData: '1 CacheData', 
    url: 'https://localhost:300' },
    { cacheName: 'CacheTwo', cacheData: '2 CacheData', 
    url: 'https://localhost:300' },
    { cacheName: 'CacheThree', cacheData: '3rd CacheData', 
    url: 'https://localhost:300' },
  ]

  return (
    <div style={{ height: 500, width: '80%' }}>
      <h4>How to store multiple cache data in ReactJS?</h4>
      <button onClick={() => addMultipleCacheData(CacheToBeStored)} >
        Add Multiple Caches</button>
    </div>
  );
}