localstorage可实现多标签页通信，利用同源共享与storage事件监听机制，写即广播、听即响应，适合同步登录态等简单状态，但不适用于高频或复杂数据传输。
用 localStorage 实现多标签页通信，核心在于利用它的同源共享特性 + storage 事件监听机制。它不是“主动推送”，而是“写即广播、听即响应”——一个标签页改了值，其他同源标签页能立刻感知变化。
这个方法轻量、兼容性好（IE8+ 支持），适合同步简单状态（如登录态、主题切换、表单草稿、开关控制等），但不适合高频或复杂数据传输。
✅ 基本原理说清楚
-
localStorage是同源（协议+域名+端口）下所有标签页共用的存储空间； - 当某个标签页调用
localStorage.setItem()或removeItem()时，其他同源标签页会触发storage事件； -
注意：触发
storage事件的标签页自身不会收到该事件（这是关键限制，避免自循环）； -
event.key、event.newValue、event.oldValue提供变更详情，可用于精准响应。
✅ 标准实现步骤
在发送方标签页（比如用户点了“登出”按钮）：
// 触发一次存储变更，相当于“发消息”
localStorage.setItem('userStatus', JSON.stringify({
logged: false,
timestamp: Date.now()
}));
在接收方标签页（比如所有打开的管理后台页面）：
window.addEventListener('storage', (event) => {
if (event.key === 'userStatus') {
const data = JSON.parse(event.newValue);
if (!data.logged) {
alert('检测到登出操作，即将跳转...');
location.href = '/login';
}
}
});
✅ 实用建议与注意事项
-
始终用
JSON.stringify存、JSON.parse取：localStorage只支持字符串，直接存对象会变成"[object Object]"； -
避免频繁写入：每改一次就触发一次事件，高频操作（如输入框实时存）易造成性能抖动，可加防抖或换用
BroadcastChannel； -
清理旧键值很重要：用完后建议
localStorage.removeItem('key')，防止污染和误触发； - 无法传递函数、undefined、Symbol 等非序列化值：只适合结构化纯数据；
-
Safari 无痕模式下
localStorage可能被禁用：需兜底判断localStorage是否可用； -
跨子域不互通：
a.example.com和b.example.com视为不同源，不能通信。
✅ 一个真实可用的小例子（状态同步）
假设你有多个标签页展示同一份待办列表，希望任一页面新增/删除任务后，其他页面自动刷新：
// 新增任务后（发送方）
const todos = JSON.parse(localStorage.getItem('todos') || '[]');
todos.push({ id: Date.now(), text: '新任务' });
localStorage.setItem('todos', JSON.stringify(todos));
// 所有页面监听（接收方）
window.addEventListener('storage', (e) => {
if (e.key === 'todos') {
renderTodoList(JSON.parse(e.newValue)); // 刷新 UI
}
});
只要确保所有页面加载时也从 localStorage 初始化一次数据，就能保持基本一致。
不复杂但容易忽略细节。
