html 5 离线存储主要通过 appCache 实现，需在 html 标签添加 manifest 属性指向缓存清单文件；该文件分为 CACHE、NETWORK 和 FALLBACK 三部分，定义缓存资源、在线资源及备用页面；服务器须配置。text/cache-manifest MIME 类型； 浏览器 首次访问时下载缓存资源，仅当 manifest 内容变化才更新；因存在缓存陷阱、更新不灵活等问题，AppCache 已被废弃，推荐新项目使用 Service Worker 与 PWA 方案。
html5 的离线存储功能主要通过 Application Cache（简称 AppCache）实现，允许网页在没有网络连接的情况下依然可以加载和运行。虽然 AppCache 已被现代 浏览器 逐步弃用（推荐使用 Service Workers 和 PWA 方案），但在一些旧项目或特定场景中仍可能遇到。
1. 启用 Application Cache
要使用 HTML5 离线存储，首先需要在 HTML 文件的 <html> 标签中添加 manifest 属性：
<html manifest="cache.manifest">
立即学习 “ 前端免费学习笔记（深入）”；
这个属性指向一个文本文件（通常命名为 cache.manifest），该文件定义了哪些资源需要被缓存。
2. 创建 manifest 缓存清单文件
manifest 文件是一个纯文本文件，包含三部分：CACHE、NETWORK 和 FALLBACK。
示例：cache.manifest
CACHE MANIFEST # 版本号：v1.0 <p>CACHE: /index.html /style.css /app.js /images/logo.png</p><p>NETWORK: /api/*</p><p>FALLBACK: /offline.html</p>- CACHE: 列出需要被离线缓存的资源，浏览器会优先从本地加载这些文件。
- NETWORK: 指定哪些资源不缓存，必须联网才能访问（如 API 接口）。
- FALLBACK: 定义当资源无法访问时的备用页面（例如网络断开时显示 offline.html）。
注意：manifest 文件本身也必须被服务器正确识别。你需要配置服务器以返回正确的 MIME 类型。
3. 配置服务器 MIME 类型
服务器必须将 .manifest 文件作为 text/cache-manifest 类型返回。
AddType text/cache-manifest .manifesttypes {text/cache-manifest manifest;}确保你的 web 服务器已设置此类型，否则 AppCache 将无法正常工作。
4. 浏览器缓存行为说明
当用户首次访问带有 manifest 的页面时，浏览器会自动下载并缓存清单中列出的资源。
window.applicationCache.addEventListener('updateready', function() {if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {window.applicationCache.swapCache(); // 应用新缓存 } }, false);5. 注意事项与局限性
AppCache 存在多个设计缺陷，已被现代开发实践淘汰：
- 缓存更新机制不灵活，依赖文件内容变化触发。
- 容易导致“缓存陷阱”——用户看不到最新内容。
- 不支持细粒度控制，难以调试。
- 所有主流浏览器已标记为废弃（deprecated）。
建议新项目使用 Service Worker + Cache API 实现更强大、可控的离线功能，属于 PWA（渐进式 Web 应用）的核心技术。
基本上就这些。如果你维护的是老系统，了解 AppCache 是必要的；但做新项目时，优先考虑现代方案。
