localStorage本身能跨页面持久化，但裸用易踩坑：仅存字符串导致对象变"[object Object]"、无默认值需手动判null、多标签页不自动同步、键名易冲突；读写须JSON序列化+try-catch、加前缀隔离、封装兜底逻辑，并用自定义事件替代storage事件实现可靠变更通知。
localStorage 本身就能跨页面持久化，不需要额外封装——但直接裸用容易踩坑，尤其在配置中心这类需要类型安全、变更通知、默认值兜底的场景。
为什么直接 localStorage.setItem 和 localStorage.getItem 不够用
它只存字符串，存对象会变成 "[object Object]"；没有默认值机制，每次读都要手动判断 null；多个标签页修改后，其他页面不会自动感知变化；而且不同配置项混在一起，容易键名冲突或误删。
常见错误现象：JSON.parse(localStorage.getItem("config")) 报 SyntaxError: Unexpected token u in JSON at position 0（因为值是 null 字符串化后成了 "null"）。
实操建议：
- 所有写入前必须
JSON.stringify，读取后必须JSON.parse并做try/catch - 键名统一加前缀，比如
"myapp:config:"，避免和第三方库冲突 - 永远不要假设
getItem返回非空值——它返回null（不是"null"），但 JSON 解析时会出错
用一个轻量函数封装读写 + 默认值兜底
不需要引入整个状态库，几行代码就能解决核心问题。关键是把「读取 → 解析 → 合并默认值」收拢到一个函数里。
示例：
function getConfig(key, defaults = {}) {
try {
const raw = localStorage.getItem(`myapp:config:${key}`);
return { ...defaults, ...(raw ? JSON.parse(raw) : {}) };
} catch (e) {
return { ...defaults };
}
}
function setConfig(key, value) {
try {
localStorage.setItem(`myapp:config:${key}`, JSON.stringify(value));
// 触发自定义事件，供其他页面监听
window.dispatchEvent(new CustomEvent('config-change', { detail: { key, value } }));
} catch (e) {
console.warn('Failed to save config:', e);
}
}
使用场景：登录页设置语言偏好 setConfig("ui", { lang: "zh-CN", theme: "dark" })，首页加载时调用 getConfig("ui", { lang: "en-US", theme: "light" }) 自动兜底。
跨页面响应变更：监听 storage 事件还不够
storage 事件只在「其他标签页」触发，当前页修改后自己收不到；而且它不携带新值，只给键名和旧值（event.oldValue 是 null 时无法还原）。
所以得自己补一层通知机制：
- 写入时主动
dispatchEvent自定义事件（如上例），当前页和其他页都能监听 - 其他页用
window.addEventListener('config-change', handler)响应 - 不要依赖
storage事件来更新 UI 状态——它不可靠，且无法拿到新值
性能影响：自定义事件开销极小；但如果配置项频繁变更（比如拖拽实时存缩放比例），建议加防抖，避免连续触发重渲染。
容易被忽略的边界点
localStorage 有容量限制（通常 5MB），但更现实的问题是：它不区分环境。开发时写的配置会污染测试/生产环境的本地数据。
实操建议：
- 开发阶段加环境前缀，比如
process.env.NODE_ENV === 'development' ? 'dev:myapp:config:' : 'myapp:config:' - 敏感配置（如 API 密钥）绝不能存 localStorage——它可被任意脚本读取
- 如果用户清空浏览器数据，配置就彻底丢失，别把它当服务端备份
- IE11 下
localStorage在隐私模式可能抛异常，需包裹try/catch，且不能静默失败（要降级到内存存储）
最麻烦的其实是类型漂移：今天存 { timeout: 5000 }，明天改成 { timeoutMs: 5000, retry: true }，老数据没清理就会导致字段缺失。这类情况得靠版本号字段或迁移逻辑处理，不是 localStorage 本身能解决的。
