JavaScript本地存储主要有localStorage、sessionStorage、IndexedDB、Cache API及File System Access API；选择需依据数据类型、大小、生命周期、查询需求、离线支持与浏览器兼容性。
JavaScript 中的本地存储主要有 localStorage、sessionStorage、IndexedDB、Cache API（配合 Service Worker），以及较新的 Web Storage API 的扩展方案如 CompressionStream + localStorage（需自行压缩） 和实验性 API 如 File System Access API（仅限安全上下文且用户主动授权）。选择哪种方式，关键看你的数据类型、大小、生命周期、是否需要搜索/索引、是否需离线支持，以及浏览器兼容性要求。
localStorage：适合小量、持久、键值对式配置数据
localStorage 是最常用也最简单的本地存储方式。它以字符串形式保存键值对，数据永久存在（除非手动清除），同源共享，不随页面刷新或关闭丢失。
- 单个域名下容量通常为 5–10MB（因浏览器而异），但实际建议控制在 2–5MB 内，避免阻塞主线程（读写是同步的）
- 只能存字符串，对象需用
JSON.stringify()和JSON.parse()转换；注意undefined、函数、Symbol、Date 对象等无法被 JSON 序列化 - 适用于：用户偏好设置、主题切换状态、表单草稿（短文本）、访问标记（如“已弹窗提示”）
- 不适用于：大量数据、敏感信息（无加密，可被 XSS 读取）、需要事务或查询能力的场景
sessionStorage：适合临时、会话级、页面级数据
和 localStorage 接口一致，但数据只在当前浏览器标签页有效，关闭标签即清空，新开标签也不共享。适合不需要跨会话保留的信息。
- 典型用途：多步骤表单中间状态、临时 token（非敏感）、导航来源标记、防重复提交的 nonce
- 注意：页面刷新保留，但前进/后退或
location.reload()不会丢失；关闭标签、崩溃、或手动清除会话数据则丢失 - 同样有同步阻塞问题，不适合高频读写
IndexedDB：适合中大型结构化数据与离线应用
IndexedDB 是浏览器内置的低级 NoSQL 数据库，支持对象存储、索引、事务、游标遍历，容量远大于 localStorage（可达数百 MB，甚至占硬盘一定比例），且读写为异步，不卡 UI。
立即学习“Java免费学习笔记（深入）”；
- 适合：邮件客户端缓存、离线笔记、PWA 离线资源管理、带搜索/过滤的本地数据集（如产品目录）
- 学习成本较高：需处理版本升级、objectStore 创建、索引定义、事务作用域；推荐用封装库如 Dexie.js 简化操作
- 注意：不能直接存函数、DOM 元素、Blob（需转为 ArrayBuffer 或使用
createObjectURL存 URL）；跨源不可访问
Cache API + Service Worker：专用于 HTTP 请求缓存（PWA 场景）
Cache API 不是通用数据存储，而是为拦截网络请求、缓存响应（HTML/CSS/JS/图片/API 返回体等）设计的，必须配合 Service Worker 使用，是构建可靠离线体验的核心。
- 适合：静态资源预缓存、API 响应缓存（如 GET 列表）、按策略更新（stale-while-revalidate）
- 数据以 Request/Response 对象形式存储，天然支持流式读取和 Headers 控制
- 不能直接存任意 JS 对象；不提供查询能力；清理需手动调用
caches.delete() - 注意：仅在 HTTPS 或 localhost 可用；Service Worker 有生命周期限制（可能被终止）
基本上就这些。简单场景用 localStorage/sessionStorage；要存对象数组并支持查改删，选 IndexedDB；做 PWA 离线资源管理，用 Cache API；敏感数据别存前端，哪怕加了 Base64 或简单混淆也不安全；超大文件（如视频、CAD）考虑 File System Access API（用户授权后直写本地磁盘）或后端代理分片上传。选型不是越新越好，而是匹配需求、团队熟悉度和兼容性底线。
