HTML5离线存储主要通过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 文件的 标签中添加 manifest 属性：
立即学习“前端免费学习笔记（深入）”；
这个属性指向一个文本文件（通常命名为 cache.manifest），该文件定义了哪些资源需要被缓存。
2. 创建 manifest 缓存清单文件
manifest 文件是一个纯文本文件，包含三部分：CACHE、NETWORK 和 FALLBACK。
示例：cache.manifest
CACHE MANIFEST # 版本号：v1.0CACHE: /index.html /style.css /app.js /images/logo.png
NETWORK: /api/*
FALLBACK: /offline.html
- CACHE: 列出需要被离线缓存的资源，浏览器会优先从本地加载这些文件。
- NETWORK: 指定哪些资源不缓存，必须联网才能访问（如 API 接口）。
- FALLBACK: 定义当资源无法访问时的备用页面（例如网络断开时显示 offline.html）。
注意：manifest 文件本身也必须被服务器正确识别。你需要配置服务器以返回正确的 MIME 类型。
3. 配置服务器 MIME 类型
服务器必须将 .manifest 文件作为 text/cache-manifest 类型返回。
Apache 配置：
AddType text/cache-manifest .manifest
Nginx 配置：
types {
text/cache-manifest manifest;
}
确保你的 web 服务器已设置此类型，否则 AppCache 将无法正常工作。
4. 浏览器缓存行为说明
当用户首次访问带有 manifest 的页面时，浏览器会自动下载并缓存清单中列出的资源。
- 一旦资源被缓存，即使网络恢复，浏览器也不会自动更新，除非 manifest 文件内容发生变化（哪怕只是注释中的版本号改变）。
- 可以通过 JavaScript 监听缓存状态事件，比如检查是否更新：
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 是必要的；但做新项目时，优先考虑现代方案。
