使用LocalStorage跨页面通信

LocalStorage是常用的前端本地存储方式，它有一个相关的事件StorageEvent。

当LocalStorage变化时，会触发storage事件。利用这个特性，可以通过把消息写入LocalStorage，然后通过在各个页面内监听storage事件的方式来实现跨页面通信。

window.addEventListener("storage", (e) => {
    if (e.key === "custom-data") {
        const data = JSON.parse(e.newValue);
    }
});

当某个页面需要发送消息时，只需要使用LocalStorage的setItem方法改变对应的值就可以了，需要注意的是storage事件只有在值真正改变时才会触发。

因为浏览器同源策略的限制，该方法只能在同源页面间进行通信。