Storage 事件是浏览器在localStorage或sessionStorage数据发生变化时触发的事件。关键特性：

• 📌 跨标签页触发：事件在其他同源标签页中触发，而非修改数据的标签页本身。
• 📌 事件属性：包含 key（变化的键）、oldValue、newValue、url（触发源的URL）、storageArea（受影响的Storage对象）。
• 📌 同源限制：只有协议、域名、端口完全相同的页面之间才能收到彼此的storage事件。

这是浏览器设计的安全机制。storage事件的设计初衷是跨浏览上下文通知——让其他标签页/窗口知道数据发生了变化。如果在当前页面也触发，可能导致：

• 🔄 无限循环：A修改→触发A的storage→A再次修改→...
• 🐛 逻辑混乱：修改者已经知道数据变更，无需再被通知。

在本演示工具中，我们通过手动创建 new StorageEvent()并dispatchEvent来模拟跨标签页效果，让您在同一页面中也能直观看到通信过程。模拟事件的isTrusted属性为false，真实事件为true。

关键区别：

• 🔹 localStorage：同源所有标签页共享同一存储空间，storage事件可以跨标签页触发。
• 🔹 sessionStorage：每个标签页有独立的存储空间（即使是同源），因此storage事件不会跨标签页触发。仅在iframe场景中，同源的iframe之间可能共享sessionStorage。

因此，跨标签页通信只能使用localStorage（或BroadcastChannel API）。

BroadcastChannel API是专门为跨浏览上下文通信设计的现代API：

• ✅ 无需存储：不依赖localStorage，不会产生磁盘I/O。
• ✅ 任意数据：可直接传递对象、数组等复杂类型（通过结构化克隆），无需JSON序列化。
• ✅ 更高效：专为通信设计，性能优于storage事件。
• ✅ 支持Worker：可在Web Worker中使用。
• ⚠️ 兼容性：现代浏览器均支持，但IE不支持。

示例代码：const channel = new BroadcastChannel('my_channel'); channel.postMessage({data: 'hello'});

常见跨标签页通信方案对比：

🏆 推荐：现代项目优先使用BroadcastChannel，需要兼容IE时使用localStorage + storage事件。

• ✅ 兼容性极好：所有主流浏览器（Chrome、Firefox、Safari、Edge）均支持，包括移动端浏览器。
• ⚠️ 隐私模式：Safari隐私模式下localStorage可能不可用或容量受限。
• ⚠️ 配额限制：localStorage通常限制5-10MB，超出会抛出QuotaExceededError。
• ⚠️ 同步操作：localStorage读写是同步的，大量数据操作可能阻塞主线程。
• 💡 事件触发条件：只有当值实际发生变化时才会触发storage事件。设置相同的值不会触发。