JS/React中创建JSON对象变量及React应用离线缓存技术问询

嘿，我来帮你捋捋这个React应用离线缓存的实现思路，刚好之前做过类似需求，给你分享下具体方案～

核心逻辑 #

你要做的就是首次请求JSON里的URL内容时，把数据存到localStorage；后续访问时优先读缓存，缓存不存在/在线状态下再重新请求更新，这样离线时就能直接用缓存好的内容了。

具体实现步骤 #

1. 封装通用缓存工具函数 #

先写个工具函数统一处理localStorage的读写，还可以加过期时间（可选，用来定期更新缓存）：

// utils/cache.js
const CACHE_PREFIX = 'app_content_cache_';

// 写入缓存，默认24小时过期
export const setCache = (key, data, expiresIn = 86400000) => {
  const cacheItem = {
    data,
    timestamp: Date.now(),
    expiresIn
  };
  localStorage.setItem(CACHE_PREFIX + key, JSON.stringify(cacheItem));
};

// 读取缓存，自动判断是否过期
export const getCache = (key) => {
  const cacheStr = localStorage.getItem(CACHE_PREFIX + key);
  if (!cacheStr) return null;
  
  const cacheItem = JSON.parse(cacheStr);
  const isExpired = Date.now() - cacheItem.timestamp > cacheItem.expiresIn;
  
  if (isExpired) {
    localStorage.removeItem(CACHE_PREFIX + key);
    return null;
  }
  
  return cacheItem.data;
};

2. 处理主JSON请求与内容缓存 #

假设你用fetch请求主JSON，拿到里面的URL列表后逐个处理：

// components/ContentDisplay.js
import { useState, useEffect } from 'react';
import { setCache, getCache } from '../utils/cache';

const ContentDisplay = () => {
  const [contentList, setContentList] = useState([]);
  const MAIN_JSON_URL = 'http://demo0046512.mockable.io/stream/anycontent';

  useEffect(() => {
    const fetchAndCacheContent = async () => {
      try {
        // 先尝试读主JSON的缓存，离线时直接用缓存
        let mainData = getCache('main_json');
        if (!mainData) {
          // 在线时重新请求主JSON并缓存
          const mainRes = await fetch(MAIN_JSON_URL);
          mainData = await mainRes.json();
          setCache('main_json', mainData);
        }

        // 假设主JSON里有urls数组，比如 { urls: ['url1', 'url2', ...] }
        const contentUrls = mainData.urls || [];

        // 批量处理每个URL的内容
        const processedContent = await Promise.all(
          contentUrls.map(async (url) => {
            // 优先读缓存
            const cachedContent = getCache(url);
            if (cachedContent) {
              return { url, content: cachedContent };
            }

            // 缓存不存在则请求并写入缓存
            const contentRes = await fetch(url);
            const contentData = await contentRes.json();
            setCache(url, contentData);
            return { url, content: contentData };
          })
        );

        setContentList(processedContent);
      } catch (err) {
        console.error('请求或缓存出错:', err);
        // 离线时可以给用户提示："当前离线，展示缓存内容"
      }
    };

    fetchAndCacheContent();
  }, []);

  return (
    <div className="content-container">
      {contentList.map((item, idx) => (
        <div key={idx} className="content-item">
          <h3>来自 {item.url}</h3>
          <pre>{JSON.stringify(item.content, null, 2)}</pre>
        </div>
      ))}
    </div>
  );
};

export default ContentDisplay;

3. 进阶优化：用IndexedDB替代localStorage #

如果你的缓存内容体积较大（超过localStorage的5MB限制），可以换成IndexedDB来存储，它支持更大的存储空间，还能存Blob类型数据。不过实现起来比localStorage复杂一点，适合内容较多的场景。

4. 可选：Service Worker全局缓存 #

如果想让整个应用都支持离线访问（比如静态资源、页面路由），可以搭配Service Worker做全局缓存。但如果只是缓存JSON内容，上面的localStorage方案就足够轻便了。

注意事项 #

• 要处理缓存过期逻辑，避免用户一直看到旧内容；
• 离线时请求失败要给用户友好提示；
• 如果JSON里的URL有动态变化，要考虑缓存键的唯一性，避免缓存冲突。

内容的提问来源于stack exchange，提问作者OhWords