localStorage适合长期保存非敏感的键值对数据，如用户偏好、表单草稿等；仅支持字符串存储，存对象需JSON.stringify，读取需JSON.parse并加try-catch；受同源限制，容量约5–10MB，可监听storage事件实现跨标签页通信。
localStorage 是 WebStorage API 中最常用的部分，适合长期保存用户偏好、登录状态、表单草稿等不需要频繁同步的数据。它以键值对形式存储在浏览器中，数据不会过期，除非手动清除或用户主动删除。
基本用法：存、取、删、清
所有操作都通过 window.localStorage（可简写为 localStorage）调用：
-
存储数据：用 setItem(key, value)，value 必须是字符串。如需存对象，先用 JSON.stringify() 转换：
localStorage.setItem('user', JSON.stringify({name: '张三', age: 28})); -
读取数据：用 getItem(key)，返回字符串，记得用 JSON.parse() 还原：
const user = JSON.parse(localStorage.getItem('user')); -
删除单项：用 removeItem(key)，比如清除用户信息：
localStorage.removeItem('user'); - 清空全部：用 clear()，慎用，会删除当前域名下所有 localStorage 数据。
注意数据类型和异常处理
localStorage 只支持字符串，直接存数字、布尔或对象会自动调用 toString()，导致数据丢失或错误：
- 存 localStorage.setItem('count', 42) → 实际存的是字符串 '42'；
- 存 localStorage.setItem('active', true) → 存的是 'true'，不是布尔值；
- 对象不序列化就存，会变成 '[object Object]'，取出来无法还原。
建议统一用 JSON.stringify / JSON.parse 处理复合数据，并包裹 try-catch 防止解析失败：
立即学习“Java免费学习笔记（深入）”；
try {const data = JSON.parse(localStorage.getItem('config')) || {};
} catch (e) {
console.warn('localStorage 数据解析失败', e);
}
适用场景与避坑提醒
- 适合：记住暗色模式开关、保存搜索关键词、缓存接口响应（配合时间戳判断是否过期）、暂存未提交的编辑内容；
- 不适合：存储敏感信息（如 token、密码），因为 localStorage 不受 HTTPS 保护且易被 XSS 窃取；
- 注意同源限制：http://a.com 和 https://a.com 不互通；子域名间也不共享（a.example.com ≠ b.example.com）；
- 容量限制约 5–10MB（因浏览器而异），超限时会抛出 QuotaExceededError，建议写入前检查剩余空间或做降级处理。
监听 storage 变化（跨标签页通信）
当同一域名下的其他标签页修改 localStorage 时，可通过 window.addEventListener('storage', callback) 接收通知：
window.addEventListener('storage', (e) => {if (e.key === 'theme') {
document.body.className = e.newValue;
}
});
注意：该事件只在其他标签页触发，当前页修改不会触发自身监听；e.oldValue 和 e.newValue 均为字符串，且 e.url 返回修改页面的完整地址。
