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