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.
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.
Javascript
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:
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA