How to check cache is already existing or not in ReactJS ?

Last Updated : 20 Nov, 2023

We can use cacheStorage in React JS to check cache is already existing or not. We can check cache already exists or not from the browser and use it 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 check whether the cache is already existing or not in React JS define isCacheAlreadyExisting() function which takes the cache name and returns true/false based on whether the given cacheName already exists or not. When we click on the button, the function is triggered, and it checks cache is already exists or not. In the following example, we are trying to check whether CacheThree and CacheEight are already present in the browser or not, our browser has five caches named CacheOne, CacheTwo, CacheThree, CacheFour, and CacheFive as shown below:

Steps to Create React Application:

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

Example: This example use cache.key to access all cache and check if the requested cache already exist .

Javascript

//  Filename - App.js 
  
import * as React from "react"; 
  
export default function App() { 
    // Function to check cache is already exisitng or not 
    const isCacheAlreadyExisting = async ({ 
        cacheName, 
        url, 
    }) => { 
        if (typeof caches === "undefined") return false; 
  
        let names = await caches.keys(); 
        var index = names.indexOf(cacheName); 
  
        if (index > 0) { 
            alert("True"); 
        } else { 
            alert("False"); 
        } 
    }; 
  
    // CacheThree to check 
    const cacheToCheceThree = { 
        cacheName: "CacheThree", 
        url: "https://localhost:300", 
    }; 
  
    // CacheEight to check 
    const cacheToCheckEight = { 
        cacheName: "CacheEight", 
        url: "https://localhost:300", 
    }; 
  
    return ( 
        <div style={{ height: 500, width: "80%" }}> 
            <h4> 
                How to check cache is already existing or 
                not in ReactJS? 
            </h4> 
            <button 
                onClick={() => 
                    isCacheAlreadyExisting( 
                        cacheToCheceThree 
                    ) 
                } 
            > 
                is Cache Three Already Existing 
            </button>{" "} 
            <br /> 
            <button 
                onClick={() => 
                    isCacheAlreadyExisting( 
                        cacheToCheckEight 
                    ) 
                } 
            > 
                is Cache Eight Already Existing 
            </button> 
            <br /> 
        </div> 
    ); 
} 