HTML5 的 Web 存储主要分为三大类型，针对不同数据场景设计。第一种是localStorage（本地存储），永久存储数据，手动清除才会消失；第二种是sessionStorage（会话存储），仅当前浏览器标签页会话有效，关闭页面就清空；第三种是IndexedDB，是异步的非关系型数据库，支持海量结构化数据存储。前两者是轻量级键值对存储，API 简单易用；IndexedDB 支持事务、索引，可存储文件、大数据集。三者分工明确，覆盖了前端从小配置到大数据的所有存储需求，完全替代了早期的 Cookie 存储大量数据的不安全方案。
三种存储的使用方式清晰分层，适配不同数据量。本地存储localStorage和会话存储sessionStorage是同步键值存储，API 完全通用：用setItem(key,value)存数据、getItem(key)取数据、removeItem(key)删数据、clear()清空，适合存储用户主题、表单临时数据等轻量信息。IndexedDB 是异步数据库，用于海量 / 复杂数据，先打开数据库创建存储空间，通过事务完成增删改查，支持缓存接口数据、离线文件。使用时，轻量数据用前两者，简单高效；大数据用 IndexedDB，异步不阻塞页面，三者配合实现前端全场景数据管理。
HTML5 离线应用依靠Service Workers + Cache API + 本地存储实现，是 PWA 的核心功能。首先在页面中注册 Service Worker 后台脚本，它独立于主线程运行。当 SW 安装时，通过 Cache API 缓存页面的 HTML、CSS、JS、图片等静态资源。激活后，SW 会拦截所有网络请求，判断设备是否联网：在线时请求服务器并更新缓存；离线时直接从缓存中读取资源返回给页面。搭配 IndexedDB 缓存动态接口数据，页面就能渲染离线内容。整套方案纯原生实现，无需插件，让网页断网也能正常访问使用。
AppCache 和 Service Workers 都是离线缓存方案，但AppCache 已被废弃，Service Workers 是现代标准替代者。AppCache 是早期黑盒方案，配置简单但缺陷极多：缓存规则固定、无法精细控制、不支持动态更新、容易引发缓存错乱，仅能缓存静态资源。Service Workers 可编程控制，基于事件驱动，可拦截所有请求、自定义缓存策略、支持增量更新、后台同步，搭配 Cache API 和 IndexedDB 实现全功能离线缓存。核心区别：AppCache 是半自动不可控的，Service Workers 是灵活可编程的，稳定性和功能性全面领先。
Service Workers 是运行在浏览器后台的独立脚本，和主线程分离，不阻塞页面渲染，是 PWA 的核心技术。工作流程分为三步：首先页面 JS 注册 SW，浏览器下载并解析脚本；触发install事件，开发者可在此时缓存静态资源；激活后 SW 正式接管页面，成为网络请求代理。它能监听所有fetch请求，根据逻辑返回网络数据或缓存资源。SW 支持离线运行、后台同步、消息推送，即使关闭页面也能在后台执行。全程异步非阻塞，是实现离线应用、性能优化、消息推送的底层核心。
