electron 中可通过 userdata 目录+文件系统+网络拦截实现可控本地缓存:用 app.getpath('userdata') 定义缓存根路径,按类型分目录存储;主进程用 session.webrequest 拦截请求并写入文件;渲染进程可配合 service worker 和 cache api(需 http(s) 协议);内存+磁盘双层缓存提升效率。

在 Electron 这类混合客户端中,JavaScript 无法直接操作 HTTP 缓存(如 Cache-Control 或 ETag),但可以通过组合本地文件系统、客户端存储 API 和网络拦截机制,实现可控、可持久、离线友好的本地文件缓存。关键在于绕过浏览器默认缓存策略,转而由应用层主动管理资源生命周期。
利用 app.getPath('userData') 建立专属缓存目录
Electron 提供跨平台路径 API,推荐将缓存文件统一存放在 userData 目录下(如 C:\Users\XXX\AppData\Roaming\YourApp\Cache\ 或 ~/Library/Application Support/YourApp/Cache/),避免权限问题且随应用卸载自动清理。
- 获取缓存根路径:
const cacheDir = path.join(app.getPath('userData'), 'cache'); - 配合
fs.promises管理文件:下载后保存为cacheDir/{hash}.json或cacheDir/images/{id}.png - 建议按资源类型分目录(
api/、assets/、templates/),便于清理与调试
用 session.webRequest 拦截并缓存网络响应
主进程可通过 session.webRequest.onBeforeRequest 或 onHeadersReceived 拦截请求,在响应返回前写入本地文件;再通过 onBeforeSendHeaders 或自定义协议(protocol.registerFileProtocol)将后续相同请求映射到本地缓存路径。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 对静态资源(如
/static/app.js):拦截后检查本地是否存在对应哈希文件,存在则返回file://协议路径 - 对接口数据(如
/api/user):在onHeadersReceived中读取响应体,解析 JSON 后存入cache/api/user.json并记录时间戳 - 注意设置
extraHeaders: { 'Cache-Control': 'no-store' }防止浏览器层二次缓存干扰逻辑
结合 Cache API + Service Worker(仅限渲染进程 Web 页面)
若 Electron 窗口加载的是标准 Web 页面(非 file:// 协议),可启用 Service Worker 并使用 Cache API 缓存资源——但需满足两个前提:页面必须通过 http:// 或 https:// 加载(如用 express 启一个本地服务),且开启 nodeIntegration: false 和 contextIsolation: true 安全配置。
- 注册 SW:
navigator.serviceWorker.register('/sw.js')(需服务器托管该文件) - 在
sw.js中用caches.open('v1').add(...)预缓存关键资源 - fetch 事件中优先匹配缓存,失败再回源,支持离线访问 HTML/CSS/JS
内存 + 文件双层缓存提升读取效率
高频访问的小型数据(如用户配置、主题设置)适合先加载进内存 Map,再异步落盘;大文件(图片、PDF)则直存磁盘,仅在内存中维护元数据(路径、大小、最后更新时间、ETag 校验值)。
- 示例结构:
const memoryCache = new Map(); memoryCache.set('theme', { dark: true, timestamp: Date.now() }); - 定时或监听
before-quit事件时,将内存变更同步写入cache/config.json - 读取时先查内存,未命中再读文件并反序列化,避免重复
fs.readFileSync开销
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










