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

Podemos usar el siguiente enfoque en ReactJS para almacenar datos individuales en caché en ReactJS. Podemos almacenar en caché algunos datos 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 datos individuales en caché en ReactJS. Hemos creado nuestra función addDataIntoCache que toma los datos del usuario y los almacena en el 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.

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.

Estructura del proyecto

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.

import * as React from 'react';
  
export default function App() {
  
  // Function to add our give data into cache
  const addDataIntoCache = (cacheName, url, response) => {
    // Converting our response into Actual Response form
    const data = new Response(JSON.stringify(response));
  
    if ('caches' in window) {
      // Opening given cache and putting our data into it
      caches.open(cacheName).then((cache) => {
        cache.put(url, data);
        alert('Data Added into cache!')
      });
    }
  };
  
  return (
    <div style={{ height: 500, width: '80%' }}>
      <h4>How to store data into cache in ReactJS?</h4>
      <button onClick={()=>addDataIntoCache('MyCache',
      'https://localhost:300','SampleData')} >
        Add Data Into Cache</button>
    </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: