javascript如何存储数据_本地存储有哪些方式

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），需注意安全性与性能影响。

标签： javascript java js 前端 json cookie 浏览器 端口 工具 session 区别 作用域 s