How to store multiple cache data in ReactJS ?

Storing Data in a cache is an important task in web applications. We can store multiple cache data in 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

• React JS
• CacheStorage

Approach

To store multiple cache data in React JS we will use the Windows cache that helps to access the cache stored in the browser window. Define a function that accesses named data in the cache storage and then puts the custom data the user needs to store in the browser.

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. folder name, move to it using the following command:

cd foldername

Project Structure:

Project Structure

Example: This example implements the above-mentioned approach and stores multiple caches named CacheOne, CacheTwo, and CacheThree using our defined function.

Javascript

// Filename - App.js

import * as React from "react";

export default function App() {

    // Function to add our give multiple cache data
    const addMultipleCacheData = async (cacheList) => {
        for (let i = 0; i < cacheList.length; i++) {
            // Converting our response into Actual Response form
            const data = new Response(
                JSON.stringify(cacheList[i].cacheData)
            );

            if ("caches" in window) {
                // Opening given cache and putting our data into it
                let cache = await caches.open(
                    cacheList[i].cacheName
                );
                cache.put(cacheList[i].url, data);
            }
        }
        alert("Multiple Cache Stored!");
    };

    const CacheToBeStored = [
        {
            cacheName: "CacheOne",
            cacheData: "1 CacheData",
            url: "https://localhost:300",
        },
        {
            cacheName: "CacheTwo",
            cacheData: "2 CacheData",
            url: "https://localhost:300",
        },
        {
            cacheName: "CacheThree",
            cacheData: "3rd CacheData",
            url: "https://localhost:300",
        },
    ];

    return (
        <div style={{ height: 500, width: "80%" }}>
            <h4>
                How to store multiple cache data in ReactJS?
            </h4>
            <button
                onClick={() =>
                    addMultipleCacheData(CacheToBeStored)
                }
            >
                Add Multiple Caches
            </button>
        </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/, you will see the following output: