How to get multiple cache data in ReactJS ?
Last Updated :
23 Nov, 2023
We can use the following approach in ReactJS to get multiple cache data. We can get multiple cache data from the browser and use them in our application whenever needed. Caching is a technique that helps us to store a copy of a given resource in our browser and serve it back when requested.
Prerequisites:
Approach:
To retrieve multiple cache data in React JS, implement a `getMultipleCacheData` function, specifying the cache names, and trigger it on a button click. This example demonstrates fetching data from browser caches named CacheOne and CacheFour out of five available caches: CacheOne, CacheTwo, CacheThree, CacheFour, and CacheFive.
Steps to Create the React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Now write down the following code in the App.js file.
Javascript
import * as React from 'react' ;
export default function App() {
const [cacheData, setCacheData] = React.useState();
const getMultipleCacheData = async (cacheNames) => {
if ( typeof caches === 'undefined' ) return false ;
var cacheDataArray = []
for ( var i = 0; i < cacheNames.length; i++) {
const cacheStorage = await caches.open(cacheNames[i].cacheName);
const cachedResponse = await cacheStorage.match(cacheNames[i].url);
if (!cachedResponse || !cachedResponse.ok) {
cacheDataArray[i] = `Unable to fetch ${cacheNames[i].cacheName}`
} else {
var data = await cachedResponse.json()
cacheDataArray[i] = data
}
}
setCacheData(cacheDataArray.join( ', ' ))
};
const cachesToFetch = [
]
return (
<div style={{ height: 500, width: '80%' }}>
<h4>How to get multiple cache data in ReactJS?</h4>
<button onClick={() => getMultipleCacheData(cachesToFetch)} >
Get Multiple Cache Data</button> <br />
<h6>Multiple Cache Data is: {cacheData}</h6>
</div>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...