答案：HTML5提供localStorage、sessionStorage、IndexedDB和Cache API四种本地存储方案。localStorage用于持久化键值对，sessionStorage仅限会话期间；两者均以字符串形式存储，对象需用JSON转换。IndexedDB支持大量结构化数据的异步操作，可存对象、数组和Blob，适合复杂应用。Cache API配合Service Worker实现资源缓存与离线访问，适用于PWA。Application Cache已废弃，推荐使用现代替代方案。根据需求选择：简单配置用Web Storage，大量数据用IndexedDB，离线功能用Cache API。
HTML5 提供了多种方式来实现本地存储和数据缓存，让网页在离线状态下也能运行，并提升加载速度与用户体验。这些技术主要包括 localStorage、sessionStorage、IndexedDB 和 Cache API（配合 Service Worker 使用）。下面详细介绍它们的原理与使用方法。
localStorage 与 sessionStorage：简易键值对存储
这两者都属于 Web Storage API，以字符串形式保存键值对数据，适合存储少量用户偏好或状态信息。
localStorage 持久化存储，除非手动清除，否则数据不会过期；sessionStorage 仅在当前会话有效，关闭标签页后自动清除。
基本操作如下：
立即学习“前端免费学习笔记（深入）”；
- 保存数据：localStorage.setItem('key', 'value');
- 读取数据：localStorage.getItem('key');
- 删除数据：localStorage.removeItem('key');
- 清空所有：localStorage.clear();
注意：只能存储字符串，若需保存对象，应使用 JSON.stringify() 转换后再存，读取时用 JSON.parse() 解析。
IndexedDB：浏览器内的完整数据库
当需要存储大量结构化数据（如用户记录、文件元信息等），IndexedDB 是更合适的选择。它是一个低级 API，支持事务型、异步操作的客户端数据库。
主要特点包括：
- 可存储对象、数组、二进制数据（Blob）
- 支持索引查询，性能较好
- 异步执行，不阻塞页面渲染
使用流程大致为：
- 打开数据库并创建版本升级事务
- 定义对象仓库（类似表）和索引
- 通过事务进行增删改查操作
示例代码片段：
const request = indexedDB.open('MyDB', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
request.onsuccess = function() {
const db = request.result;
const tx = db.transaction('users', 'readwrite');
tx.objectStore('users').add({ id: 1, name: '张三' });
};
Cache API + Service Worker：网络请求缓存
用于实现离线访问和资源预加载，常用于 PWA（渐进式 Web 应用）中。Cache API 允许你拦截网络请求并将响应缓存下来。
结合 Service Worker 可实现以下功能：
- 缓存关键静态资源（HTML、CSS、JS、图片）
- 离线时返回缓存内容
- 后台同步更新数据
注册 Service Worker 并缓存资源的简单示例：
navigator.serviceWorker.register('/sw.js');
在 sw.js 中：
self.addEventListener('install', e => {
e.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/index.html', '/style.css', '/app.js'])
)
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(r => r || fetch(e.request))
);
});
Application Cache 已废弃，推荐使用现代方案
早期 HTML5 曾提供 Application Cache（appcache）实现离线缓存，但由于存在诸多问题（如更新机制复杂、缓存难以清除），已被标准弃用。目前应优先采用 Service Worker + Cache API 方案替代。
基本上就这些。根据实际需求选择合适的本地存储方式：简单配置用 localStorage，大量结构化数据选 IndexedDB，离线应用和资源缓存则依赖 Service Worker 与 Cache API 配合。合理使用这些技术，能显著提升 Web 应用的性能与可用性。不复杂但容易忽略细节，比如数据类型转换和错误处理，开发时需特别留意。
