Storage 事件

一起看海

当 localStorage 或 sessionStorage 中的数据更新后，storage 事件就会触发，它具有以下属性：

key —— 发生更改的数据的 key（如果调用的是 .clear() 方法，则为 null）。
oldValue —— 旧值（如果是新增数据，则为 null）。
newValue —— 新值（如果是删除数据，则为 null）。
url —— 发生数据更新的文档的 url。
storageArea —— 发生数据更新的 localStorage 或 sessionStorage 对象。
重要的是：该事件会在所有可访问到存储对象的 window 对象上触发，导致当前数据改变的 window 对象除外。

我们来详细解释一下。

想象一下，你有两个窗口，它们具有相同的页面。所以 localStorage 在它们之间是共享的。

你可以想在浏览器的两个窗口中打开此页面来测试下面的代码。

如果两个窗口都在监听 window.onstorage 事件，那么每个窗口都会对另一个窗口中发生的更新作出反应。

// 在其他文档对同一存储进行更新时触发
window.onstorage = event => { // 也可以使用 window.addEventListener('storage', event => {
  if (event.key != 'now') return;
  alert(event.key + ':' + event.newValue + " at " + event.url);
};

localStorage.setItem('now', Date.now());
请注意，该事件还包含：event.url —— 发生数据更新的文档的 url。

并且，event.storageArea 包含存储对象 —— sessionStorage 和 localStorage 具有相同的事件，所以 event.storageArea 引用了被修改的对象。我们可能会想设置一些东西，以“响应”更改。

这允许同源的不同窗口交换消息。

现代浏览器还支持 Broadcast channel API，这是用于同源窗口之间通信的特殊 API，它的功能更全，但被支持的情况不好。有一些库基于 localStorage 来 polyfill 该 API，使其可以用在任何地方。