javascript中的本地存储有哪些方式_如何选择合适的存储方案

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。

标签： css javascript java html js 前端 json cad 浏览器 access 硬盘 sessio