localstorage只能存字符串，对象需用json.stringify序列化后存储，读取时用json.parse解析，且须用try...catch捕获解析错误；它会忽略函数、undefined、symbol和date等类型，容量约5mb并受跨域隔离限制，不可存储敏感信息。
localStorage 只能存字符串，对象必须 JSON.stringify
直接 localStorage.setItem('user', {name: 'Alice'}) 会存进去一个 [object Object]，读出来就是个字符串，不是原来那个对象。这是因为 localStorage 底层只接受 string 类型的值，任何非字符串输入都会被强制调用 .toString()。
正确做法是手动序列化：
- 存的时候用
JSON.stringify(obj) - 取的时候用
JSON.parse(str) - 务必加
try...catch，因为JSON.parse遇到非法 JSON 会直接抛错（比如存储内容被手动篡改过）
示例：
const user = { id: 123, name: 'Alice', active: true };
localStorage.setItem('user', JSON.stringify(user));
const saved = localStorage.getItem('user');
let parsed;
try {
parsed = JSON.parse(saved);
} catch (e) {
console.error('JSON parse failed:', e);
parsed = null;
}
JSON.stringify 不能处理函数、undefined、Symbol、Date 等类型
如果对象里有 function、undefined、Symbol 或者 Date 实例，JSON.stringify 会静默忽略它们——不报错，但数据就丢了。
立即学习“前端免费学习笔记（深入）”；
常见踩坑场景：
-
{ now: new Date(), handler: () => {} }→ 存进去只剩{} -
{ count: undefined }→ 这个字段直接消失 -
localStorage.setItem('cache', JSON.stringify(new Date()))→ 存的是字符串"2024-06-15T08:23:45.123Z"，但读出来只是字符串，不是Date对象
如果真要存 Date，得自己转成时间戳或 ISO 字符串，并在读取后手动恢复：
const data = { ts: Date.now(), name: 'test' };
localStorage.setItem('data', JSON.stringify(data));
// 读取后
const parsed = JSON.parse(localStorage.getItem('data'));
const date = new Date(parsed.ts); // 手动还原
localStorage 容量限制和跨域隔离很严格
多数浏览器给每个源（origin）配额约 5MB，超了会触发 QuotaExceededError。这不是警告，是同步报错，后续代码会中断。
另外几个关键事实：
- 协议、域名、端口任意一个不同，就是不同源，
localStorage完全不共享 -
http://a.com和https://a.com是两个独立存储空间 - 本地文件打开（
file://协议）下，多数浏览器禁用localStorage或每次都是干净沙盒 - 隐私模式下，有些浏览器会临时启用但关闭即清空
检查是否可用且未满：
try {
const test = '__storage_test__';
localStorage.setItem(test, test);
localStorage.removeItem(test);
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.warn('localStorage quota exceeded');
}
}
别把敏感数据放 localStorage，也别当数据库用
localStorage 是纯前端同步存储，没有任何访问控制——JS 脚本可读可写，XSS 攻击一打一个准。密码、token、用户身份标识这类东西，存了等于裸奔。
它也不是数据库替代品：
- 没索引、没查询能力，查个字段得全量遍历
for (let i = 0; i - 没有事务、没有过期机制，想“自动删除”只能自己记时间戳 + 每次读取时判断
- 大对象反复存取会明显卡 UI，因为
JSON.stringify/parse是同步阻塞操作
真正该考虑的边界：单页应用里缓存非敏感、结构简单、体积小（
