localstorage 修改后页面不刷新，需手动更新ui：存值后立即读取并赋值渲染，同时监听storage事件同步跨标签页变更，react用usestate+useeffect、vue用watch+onbeforeunmount实现双向同步。
localStorage 修改后页面不刷新，怎么让新值立刻生效
改了 localStorage.setItem()，但界面上还是旧数据——这不是 bug，是常见误解：localStorage 本身不触发任何 UI 更新机制，它只是存了个字符串。
必须手动通知视图更新。核心思路是：存完立刻读、立刻赋值、立刻渲染。
- 别依赖“存完就自动变”，
localStorage是纯存储 API，和 React/Vue 的响应式系统完全无关 - 如果用原生 JS 操作 DOM，存完要显式调用
document.getElementById().textContent = newValue这类逻辑 - 在 React 中，不能只改
localStorage，还得setState()；Vue 同理，得改响应式数据（比如ref或data字段） - 注意读写时机：不要在
setItem()后立刻getItem()却忘了 await —— 它是同步的，但你可能误以为要等（其实不用）
监听 localStorage 变化，跨标签页同步显示
一个标签页改了 localStorage，另一个标签页没反应？因为 storage 事件只在**其他同源窗口**触发，当前窗口修改不会触发自己的 storage 事件。
这意味着：你得自己处理“本页修改 + 本页更新”和“他页修改 + 本页更新”两件事。
立即学习“前端免费学习笔记（深入）”；
- 本页修改后，立刻更新 UI（如上一条所说）
- 同时监听
window.addEventListener('storage', handler)，处理来自其他标签页的变更 -
handler里通过event.key和event.newValue判断是否关心这条数据，再更新对应 UI - 注意：Safari 私密模式下
storage事件可能不触发，或localStorage直接被禁用
React 里用 useState + useEffect 同步 localStorage
直接把 localStorage.getItem() 当初始值传给 useState() 不够，因为后续外部修改（比如另一标签页）不会触发重渲染。
正确做法是：用 useEffect 建立 storage 监听，并在组件挂载/卸载时清理。
const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
useEffect(() => {
const onStorage = (e) => {
if (e.key === 'theme') {
setTheme(e.newValue || 'light');
}
};
window.addEventListener('storage', onStorage);
return () => window.removeEventListener('storage', onStorage);
}, []);
⚠️ 容易漏掉的是：没加 cleanup（return 那行），会导致内存泄漏或重复绑定；也没判断 e.key，结果所有 storage 变更都触发重渲染。
Vue 3 中用 watch + onBeforeUnmount 同步
Vue 3 的 ref 或 reactive 数据本身不监听 localStorage，得手动桥接。
关键点在于：写入时同步存 localStorage，读取时靠 watch 和 onBeforeUnmount 维护一致性。
- 定义一个
themeRef = ref(localStorage.getItem('theme') || 'light') - 用
watch(themeRef, val => localStorage.setItem('theme', val))确保修改自动持久化 - 同时在
onMounted里加storage事件监听，更新themeRef；并在onBeforeUnmount里移除监听 - 别用
computed({ get, set })包裹 localStorage —— get 里调getItem()看似简洁，但无法响应外部变更
最常被忽略的一点：很多人只做了“存后读”，却没处理“他页存、本页读”的路径，导致多标签页场景下状态撕裂。localStorage 本身是共享的，但它的变化不会广播给当前页——这个边界必须手动补全。
