HTML5 的离线储存怎么使用？它的工作原理是什么？

HTML5 的离线存储主要通过Application Cache (AppCache)和Service Workers (配合 Cache API)两种技术实现。重要提示早期的AppCache(manifest属性) 虽然简单但存在严重的缺陷如缓存更新困难、容易陷入死循环等已被 W3C 废弃现代浏览器已不再推荐使用。目前行业标准和最佳实践是使用Service Workers配合Cache Storage API。以下将分别介绍这两种方式重点讲解现代方案。一、现代方案Service Workers Cache API (推荐)这是目前构建 PWA (Progressive Web App) 和离线应用的核心技术。1. 工作原理Service Worker 是一个运行在浏览器后台的JavaScript 脚本它独立于网页运行充当网络代理 (Network Proxy)。注册与安装网页注册一个 Service Worker 脚本。浏览器下载并安装该脚本。拦截请求一旦激活Service Worker 会拦截页面发出的所有网络请求Fetch 事件。缓存策略当请求发生时Service Worker 首先检查Cache Storage浏览器提供的持久化缓存。如果缓存中有直接返回缓存内容离线可用。如果缓存中没有则发起网络请求。网络请求成功后可以将新内容存入缓存再返回给页面。更新机制当 Service Worker 脚本文件发生微小变化甚至只是字节变化浏览器会自动下载新版本并在后台安装。一旦新 Worker 准备就绪它会接管页面旧 Worker 停止。2. 使用步骤步骤 A: 创建 Service Worker 文件 (例如sw.js)// sw.jsconstCACHE_NAMEmy-site-cache-v1;consturlsToCache[/,/index.html,/styles.css,/script.js,/images/logo.png];// 1. 安装事件缓存静态资源self.addEventListener(install,(event){event.waitUntil(caches.open(CACHE_NAME).then((cache){console.log(Opened cache);returncache.addAll(urlsToCache);}));// 跳过等待立即激活self.skipWaiting();});// 2. 激活事件清理旧缓存self.addEventListener(activate,(event){event.waitUntil(caches.keys().then((cacheNames){returnPromise.all(cacheNames.map((cacheName){if(cacheName!CACHE_NAME){console.log(Deleting old cache:,cacheName);returncaches.delete(cacheName);}}));}));// 接管所有控制范围self.clients.claim();});// 3. 拦截请求事件核心逻辑self.addEventListener(fetch,(event){event.respondWith(caches.match(event.request).then((response){// 缓存命中返回缓存if(response){returnresponse;}// 缓存未命中发起网络请求returnfetch(event.request).then((response){// 检查是否是有效的响应if(!response||response.status!200||response.type!basic){returnresponse;}// 克隆响应因为响应流只能读取一次constresponseToCacheresponse.clone();caches.open(CACHE_NAME).then((cache){cache.put(event.request,responseToCache);});returnresponse;});}));});步骤 B: 在主页面中注册 Service Worker// main.js 或 HTML 中的 script 标签if(serviceWorkerinnavigator){window.addEventListener(load,(){navigator.serviceWorker.register(/sw.js).then((registration){console.log(SW registered: ,registration);}).catch((error){console.log(SW registration failed: ,error);});});}步骤 C: 测试使用 HTTPS 环境localhost 除外。打开浏览器开发者工具 - Application - Service Workers勾选 “Offline” 模拟离线状态。刷新页面你会发现即使断网页面依然能正常加载因为走了缓存。二、旧方案Application Cache (AppCache) (已废弃)注意除非维护极老的遗留系统否则不要在新项目中使用此方法。1. 工作原理通过在 HTML 标签中指定manifest属性告诉浏览器哪些文件需要缓存。浏览器会自动管理这些文件的缓存无需编写 JS 逻辑。2. 使用步骤步骤 A: 创建 manifest 文件 (例如app.manifest)CACHE MANIFEST # 版本号注释修改此注释可强制更新缓存 # v1.0.1 # 需要缓存的文件 CACHE: /index.html /style.css /app.js /logo.png # 需要联网访问的文件 NETWORK: /api/data * # 离线时替代文件 FALLBACK: / /offline.html步骤 B: 在 HTML 中引用!DOCTYPEhtmlhtmlmanifestapp.manifestheadtitle旧版离线应用/title/headbodyh1Hello World/h1/body/html3. 主要缺陷 (为什么被废弃)更新困难只要 manifest 文件中的任何一个字符发生变化包括注释浏览器就会认为整个缓存需要更新并重新下载所有列出的文件即使文件内容没变。缓存锁定如果用户第一次访问时网络不好manifest 文件没下载完浏览器可能会锁定该状态导致后续即使网络好了也无法更新缓存。无法精细控制无法像 Service Worker 那样灵活地决定“先网后缓存”还是“先缓存后网”。调试困难缓存行为不透明难以排查问题。三、总结对比特性Service Workers (推荐)Application Cache (废弃)实现方式JavaScript 编程HTML 属性 Manifest 文件灵活性极高 (可自定义任何缓存策略)低 (只能按列表缓存)更新机制脚本变化即更新支持版本控制依赖 manifest 文件变化容易误判网络控制可拦截所有请求支持离线优先、网络优先等简单黑白名单调试可通过 DevTools 详细查看难以调试浏览器支持现代浏览器全面支持已废弃新浏览器不再推荐HTTPS 要求必须 (localhost 除外)不需要结论请使用 Service Workers。它是 HTML5 离线存储的现代标准提供了强大的控制能力和更好的用户体验。如果你正在学习或开发 PWAService Worker 是必须掌握的核心技术。