如何在 ReactJS 中存储多个缓存数据？

我们可以在 ReactJS 中使用以下方法在 ReactJS 中存储多个缓存数据。我们可以将多个缓存数据存储到浏览器中，并在需要时在我们的应用程序中使用它。缓存是一种技术，可以帮助我们将给定资源的副本存储到浏览器中，并在请求时将其返回。

方法：按照这些简单的步骤在 ReactJS中存储多个缓存数据。我们创建了addMultipleCacheData函数，它获取用户数据列表并存储到浏览器缓存中。当我们点击按钮时，该函数被触发，数据被存储到缓存中，我们看到一个警报弹出窗口。在下面的示例中，我们尝试使用我们定义的函数存储多个名为 CacheOne、CacheTwo 和 CacheThree 的缓存。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import * as React from 'react';
  
export default function App() {
  
  // Function to add our give multiple cache data
  const addMultipleCacheData = async (cacheList) => {
  
    for (var i = 0; i < cacheList.length; i++) {
      // Coverting our respons 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
        var 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 (
    

      
How to store multiple cache data in ReactJS?
       addMultipleCacheData(CacheToBeStored)} >
        Add Multiple Caches
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：