javascript的LocalStorage是什么_如何在浏览器中存储数据

LocalStorage是浏览器提供的持久化键值对存储，仅支持字符串，需用jsON.Stringify/parse处理对象，有5MB容量限制且跨标签页需storage事件监听。

LocalStorage 是什么：浏览器里能存字符串的“小抽屉”

LocalStorage 是浏览器提供的一块持久化存储空间，本质是键值对（key-value）结构，所有值都必须是 string 类型。它不随页面刷新丢失，也不受同源策略外的站点访问——也就是说，https://a.com 存的数据，https://b.com 根本读不到。

怎么用 setItem / getItem 存取数据：别直接塞对象

常见错误是直接 localStorage.setItem('user', { name: 'Alice' })，结果存进去的是 [Object Object]。因为 setItem 只接受字符串，对象得先序列化。

• 存数据：用 json.stringify() 转成字符串再存
• 取数据：用 JSON.parse() 还原，但要加 try/catch 防止解析失败（比如值被手动删改过）
• 删除单个：用 localStorage.removeItem('key')
• 清空全部：用 localStorage.clear()（谨慎！会干掉当前域下所有 key）

localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 })); const userStr = localStorage.getItem('user'); let user = NULL; try {   user = JSON.parse(userStr); } catch (e) {   console.error('localStorage 中 user 数据损坏', e); }

为什么不能存函数、undefined、symbol 或 date 对象

JSON.stringify() 会静默忽略这些类型：

• undefined 和函数 → 消失（对象中该字段被删，数组中变成 null）
• Date → 变成 ISO 字符串（如 "2024-05-20T10:30:00.000Z"），取出来要手动转回 Date
• Symbol → 完全丢弃
• 循环引用对象 → 直接报 TypeError: Converting circular structure to JSON

如果真需要存复杂结构，得自己实现序列化逻辑，或换用 IndexedDB。

立即学习“Java免费学习笔记（深入）”；

容量限制和跨标签页同步问题

多数浏览器给每个源（origin）分配约 5MB（不是 5MB 文件，是字符串总长度），超限会抛 QuotaExceededError。另外，LocalStorage 修改后不会自动通知其他打开的同源标签页——你在一个标签页改了，另一个标签页里的 JS 不会立刻感知到变化。

• 监听变化要用 window.addEventListener('storage', handler)，但注意：触发该事件的页面自身不会收到（只通知其他同源页面）
• 事件对象的 event.key 和 event.newValue 可用来判断改了哪个 key
• 私密模式下部分浏览器会禁用 LocalStorage，或每次启动都清空，务必做容错处理

真正需要响应式同步状态时，别只靠 LocalStorage；配合 CustomEvent 或状态管理库更可靠。