localStorage.setItem()后本页UI不更新，因storage事件不通知触发者，需手动同步DOM；跨页同步靠storage事件，监听须尽早注册，Safari无痕模式需try/catch降级。
localStorage.setItem() 后本页 UI 不更新？自己补一手
storage 事件天生不通知触发者，所以你在 A 标签页点击“切换深色主题”并调用 localStorage.setItem("userPreferences", JSON.stringify({theme: "dark"}))，A 页面自己不会收到 event —— 但 UI 必须立刻响应。别等监听，写完就同步 DOM：
- 先存：确保
localStorage.setItem()成功执行 - 再应用：立即调用你的主题切换函数，比如
applyTheme("dark") - 最后广播：让其他标签页也跟上，靠 storage 事件完成
漏掉第二步，就会出现“点完按钮没反应，刷新才生效”的体验断层。
为什么用单 key 存整个配置对象，而不是多个独立 key
把主题、字体大小、行号开关等全塞进一个 userPreferences 字符串里，不是图省事，是规避竞态和维护成本：
- 写入/读取都是一次操作，避免多 key 写入顺序不一致导致部分偏好错乱
- 升级时新增字段（如加个
"wordWrap": true），只需改 JSON 结构，不用增删 key - 清空重置只要
localStorage.removeItem("userPreferences")，不会残留孤立字段 -
JSON.stringify()会丢掉undefined和函数，但用户偏好本来就不该含这些
拆成 editorTheme、editorFontSize、editorLineNumbers 等多个 key，看似直观，实则让跨标签页同步逻辑变复杂——你得监听一堆 key，还要保证它们原子性更新。
立即学习“前端免费学习笔记（深入）”；
storage 事件监听器绑定太晚，会丢掉首次变更
常见错误：页面加载后异步执行 JS（比如等 Vue 组件 mount、React useEffect），才绑 window.addEventListener("storage", handler)。这时如果另一个标签页已提前写入，事件就永远收不到。
正确做法是尽早绑定，在 <script> 标签内或 DOMContentLoaded 回调最开头就注册：
window.addEventListener("storage", (e) => {
if (e.key !== "userPreferences") return;
try {
const prefs = JSON.parse(e.newValue);
applyEditorPreferences(prefs); // 同步 UI
} catch (err) {
console.warn("invalid userPreferences", e.newValue);
}
});
注意：e.url 可用来过滤来源（比如只响应来自 /editor/ 路径的变更），但别依赖它做权限判断——它可被伪造。
Safari 无痕模式下 localStorage 报 QuotaExceededError 怎么办
Safari 隐私浏览中，localStorage 可能被禁用或立即抛 QuotaExceededError，尤其在首次写入时。不处理会导致脚本中断、偏好失效。
所有 setItem 和 getItem 操作都必须包裹 try/catch：
function safeSetPrefs(prefs) {
try {
localStorage.setItem("userPreferences", JSON.stringify(prefs));
} catch (e) {
if (e.name === "QuotaExceededError") {
console.warn("localStorage disabled (e.g. Safari private mode)");
// 降级：只存在内存，不持久化
window._inMemoryPrefs = prefs;
}
}
}
读取时同理：先 try 读 localStorage，失败则 fallback 到内存或默认值。真实场景中，这个异常比想象中更常发生，尤其在 iOS Safari 上。
