localStorage核心是setItem()和getItem()，只存字符串；存对象需JSON.stringify()、取时JSON.parse()并try/catch；removeItem()删单个键，clear()清空全部需慎用；跨标签页共享但无自动同步，可用storage事件监听；容量5–10MB且无过期机制，敏感数据勿单独依赖。
localStorage.setItem() 和 getItem() 是最常用的操作入口
存取键值对是 localStorage 的核心能力，所有操作都围绕这两个方法展开。它只接受字符串作为值，传入对象或数组会自动转成 [object Object]，这点极易踩坑。
- 存数据必须用
localStorage.setItem('key', 'value')，第二个参数会被强制转为字符串 - 取数据用
localStorage.getItem('key')，返回的是字符串，哪怕你当初存的是数字42，取出来也是"42" - 如果键不存在，
getItem()返回null，不是undefined，判断时注意用=== null或直接用 falsy 判断 - 想存对象？得先用
JSON.stringify()，读取时再用JSON.parse()—— 但要包try/catch，因为数据可能被手动篡改导致解析失败
localStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'}));
const user = JSON.parse(localStorage.getItem('user') || '{}');
localStorage.removeItem() 和 clear() 的适用场景不同
删单个键还是清空全部，选错会影响其他模块。比如登录态和用户偏好通常分属不同键，误用 clear() 会让整个应用“失忆”。
-
localStorage.removeItem('token')安全可控，适合登出时清除凭证 -
localStorage.clear()会删掉当前域名下所有 localStorage 数据，包括第三方 SDK 写入的（如埋点、A/B 测试），慎用 - 没有批量删除多个指定键的原生方法，需自行遍历
Object.keys(localStorage)过滤后逐个删
localStorage 在跨标签页间是共享的，但无事件通知机制
同一个域名下的所有标签页共用一份 localStorage，这是优势也是隐患：一个标签页改了数据，其他页不会自动更新。
- 修改后其他页面无法感知，容易出现状态不一致（比如 A 标签页登出，B 标签页仍显示“已登录”）
- 可用
storage事件监听变化：window.addEventListener('storage', e => {...})，但注意：触发该事件的页面自身收不到（只通知其他同源页面） - 事件对象
e的e.key、e.oldValue、e.newValue可用于判断变更内容，但e.url是来源页面地址，不能用来通信
localStorage 有容量限制且不支持过期时间
主流浏览器限制在 5–10 MB 左右（按字符串长度算），超出会抛 QuotaExceededError；更重要的是，它天生不支持 TTL，所谓“过期”只能靠代码维护。
立即学习“前端免费学习笔记（深入）”；
- 存入时建议加时间戳字段，读取时检查是否超时，超时则主动
removeItem() - 不要把大文件（如 base64 图片）直接塞进 localStorage，会迅速占满配额，也拖慢页面
- 敏感信息（如 token）别只依赖 localStorage 存储，它可被任意同源 JS 读取，应配合 HttpOnly Cookie 或短期内存缓存使用
- 隐私模式下部分浏览器会禁用 localStorage，
setItem可能静默失败，操作前建议先测试写入能力
真正麻烦的不是怎么存，而是怎么保证多个页面之间状态同步、怎么安全清理、以及怎么应对配额耗尽——这些细节没处理好，localStorage 就从便利变成隐患。
