17370845950

JavaScript本地存储主要有localStorage、sessionStorage、cookies、IndexedDB和Cache API；localStorage长期同源存储且容量5–10MB，sessionStorage仅限单标签会话，cookies自动随请求发送且体积≤4KB，IndexedDB支持大量结构化异步存储。

JavaScript 本地存储主要有三种常用方式：localStorage、sessionStorage 和 cookies（配合 document.cookie 使用），此外还有更现代的 IndexedDB 和实验性的 Cache API（主要用于资源缓存）。它们适用场景不同，核心区别在于生命周期、容量限制和作用域。

localStorage：长期保存，同源共享

数据永久保存（除非手动清除），关闭浏览器也不丢失，仅限同源（协议+域名+端口）访问。

• 只支持字符串，存对象需先 JSON.stringify()，读取时用 JSON.parse()
• 容量通常为 5–10MB（因浏览器而异）
• 操作简单：localStorage.setItem('key', 'value')、localStorage.getItem('key')、localStorage.removeItem('key')

sessionStorage：页面会话级临时存储

数据仅在当前浏览器标签页有效，关闭该标签即清空，同样要求同源，其他行为与 localStorage 基本一致。

• 适合暂存表单草稿、导航状态等单次会话数据
• 不跨标签页共享，即使同域名新开一个 tab 也是独立空间
• API 完全相同，只是把 localStorage 换成 sessionStorage

Cookie：带服务端交互的小型文本存储

每次 HTTP 请求都会自动携带（可配置 HttpOnly 或 Secure），体积小（单个通常 ≤4KB），需注意安全性与性能影响。

• 通过 document.cookie = 'name=value; expires=...; path=/; secure; SameSite=Lax' 设置
• 读取需手动解析字符串（没有原生 get 方法），建议用工具函数或库处理
• 常用于身份凭证（如 session ID）、用户偏好、跟踪标识等

IndexedDB：浏览器内置的异步数据库

适合存储大量结构化数据（如离线邮件、缓存图片、日志），支持索引、事务、增删改查，但 API 较复杂。

• 容量远大于 localStorage（可达数百 MB，取决于磁盘空间）
• 所有操作异步，避免阻塞主线程
• 需要打开数据库 → 创建/获取 objectStore → 执行请求（add/get/put/delete）

基本上就这些。日常开发中，优先选 localStorage 或 sessionStorage；要持久化登录态且需服务端验证，用 Cookie；存大量离线数据或需查询能力，上 IndexedDB。不复杂但容易忽略的是：别往 localStorage 存敏感信息，它完全暴露在前端；也别依赖它做关键业务逻辑，毕竟用户可以随时清空。