HTML5并无真正的文件系统API，所谓“FileSystem API”是已废弃的Chrome实验特性；当前标准可用的本地存储方案为localStorage、sessionStorage、IndexedDB、Cache API及File API，需按场景分层协同使用。
HTML5 本身没有提供真正的文件系统 API（如读写本地磁盘任意路径），所谓“HTML5 文件系统 API”是早期 Chrome 实验性实现（webkitRequestFileSystem），已于 2018 年被废弃，现代浏览器已全面移除支持。因此，当前标准中不存在可与本地缓存技术“结合使用”的 HTML5 文件系统 API。
实际可用的本地数据存储方案
开发者真正能稳定使用的，是以下四类标准化、跨浏览器支持的本地存储机制：
-
Web Storage（localStorage / sessionStorage）：适合存少量字符串型配置或状态，如用户主题偏好、表单草稿。对象需用
JSON.stringify()转换后存入，读取时再JSON.parse()还原。 - IndexedDB：浏览器内置的异步数据库，可存对象、数组、Blob（如图片、音频片段）、文件元数据等。适合离线场景下管理结构化数据，例如缓存文章列表+正文内容+附件引用。
- Cache API + Service Worker：专为资源级缓存设计，用于保存 HTTP 响应（HTML/CSS/JS/图片等）。它不存业务数据，而是让整个页面“离线可访问”，构成 PWA 的核心能力。
-
File API（配合用户主动选择）：通过
<input type="file">或拖放获取File对象，再用FileReader读取内容。这是唯一安全访问用户本地文件的方式，但属于“一次性读取”，不等于持久化存储。
如何合理组合使用这些技术
典型离线应用常采用分层策略：
- 资源层（静态壳）：用 Cache API 预缓存 HTML 模板、CSS、主 JS 脚本、图标等，确保 App Shell 离线可加载。
- 数据层（动态内容）：用 IndexedDB 存储从网络获取的结构化数据（如用户笔记、商品清单），支持增删改查和索引查询。
- 状态层（轻量交互）：用 localStorage 记录 UI 状态（折叠面板、选中项、上次滚动位置），提升会话连续性。
- 临时文件处理：用户上传文件时，用 File API 读取内容，再将关键字段或缩略图存入 IndexedDB；大文件若需暂存，可转为 Blob 存入 IndexedDB（注意浏览器配额限制，通常 50MB–2GB 不等）。
不能做的事和常见误区
需要特别注意边界：
立即学习“前端免费学习笔记（深入）”；
- 无法绕过用户授权直接读写本地硬盘任意目录（出于安全强制限制）；
- 不能把 IndexedDB 当作“本地文件系统”来模拟目录树操作，它本质是键值+对象仓库模型；
- Cache API 只缓存网络响应，不能直接存 JavaScript 对象或自定义二进制块；
- localStorage 和 sessionStorage 容量有限（通常 5–10MB），且阻塞主线程，不适合存大量或二进制数据。
现代离线 Web 应用的落地，靠的是这几种技术各司其职、协同配合，而不是依赖一个不存在的“文件系统 API”。
