HTML5没有文件系统API，所谓“HTML5文件系统”是已废弃的FileSystem API；现代离线缓存应使用IndexedDB+Cache API+Service Worker协同实现。
HTML5本身并没有定义“文件系统”API——所谓“HTML5文件系统”实为已废弃的FileSystem API（曾由Chrome实验性支持，2014年起逐步移除，2023年完全弃用），当前标准中并不存在可直接读写本地磁盘文件的Web File System。因此，“HTML5文件系统与本地存储整合”这一提法存在概念混淆。真正可行、现代且被广泛支持的离线缓存架构，依赖的是IndexedDB + Cache API + Service Worker三者协同，而非虚构的“文件系统”。
别再找“HTML5文件系统”，用对这三样才可靠
想实现高性能离线缓存，重点不是模拟操作系统文件操作，而是分层管理资源与数据：
-
静态资源离线化：HTML、CSS、JS、图片等通过
Cache API配合Service Worker缓存，支持版本控制、增量更新和灵活策略（如Stale-while-revalidate） -
结构化数据持久化：用户状态、表单草稿、离线操作记录等，用
IndexedDB存储——它支持事务、索引、二进制（Blob/File）、大容量（通常达数百MB），且异步不卡UI -
简单状态轻量存取：仅需保存少量字符串型配置（如主题色、语言偏好），用
localStorage即可；注意它同步阻塞、容量小（5–10MB）、明文可见，不适合敏感或大量数据
Service Worker 是离线架构的“总调度员”
它不是装饰，而是离线能力的中枢：
- 注册后在后台长期运行，能拦截所有同源fetch请求
- 可在安装阶段预缓存核心资源（
cache.addAll()），也可在fetch事件中动态缓存或回退到网络 - 配合
clients.matchAll()可向打开的页面广播消息，触发UI刷新或同步提示 - 支持
background sync（需HTTPS），在网络恢复后自动重发待同步的离线操作（如提交表单、上传照片）
IndexedDB 不是“升级版 localStorage”，而是另一维度的工具
二者定位不同，不可互换：
-
localStorage适合：一键存取字符串，比如localStorage.setItem('darkMode', 'true') -
IndexedDB适合：存对象数组、带时间戳的日志、含附件的笔记——例如创建一个notesobjectStore，按updatedAt建索引，支持按日期范围查询最近10条未同步笔记 - 关键提醒：IndexedDB操作必须在事务中进行；打开数据库、创建objectStore、写入数据都需监听
onsuccess/onerror，建议用封装库如idb（轻量、Promise化）简化流程
避免踩坑：这些“过时方案”请立刻停用
它们要么已被标准废弃，要么兼容性差、功能受限：
- Application Cache（.appcache）：W3C已于2019年正式废弃，所有现代浏览器（Chrome 95+、Firefox 85+、Safari 16.4+）已移除支持。其清单机制僵硬、更新逻辑反直觉、无法细粒度控制，极易导致白屏或旧资源残留
- Web SQL Database：从未成为W3C标准，仅WebKit/Blink短暂支持，现全面弃用。IndexedDB是官方指定替代方案
-
File System API / origin private file system：Chrome曾实验性支持，但因安全模型争议大，2023年随Storage Foundation API演进被彻底淘汰；当前可用的
showDirectoryPicker()等API属File System Access API，需用户显式授权，不适用于后台静默缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
