监听本地存储更改

当我们在浏览器中使用本地存储时，有时候需要实时的监听本地存储的变化，以便在变化发生时做出相应的响应。这时候我们可以使用 window.localStorage 提供的 storage 事件来监听本地存储的更改，本文将介绍如何使用 storage 事件来监听本地存储的更改。

storage 事件

storage 事件是 window 对象中的一个事件，它会在本地存储中的数据发生变化时被触发。该事件的触发条件包括以下情况：

1. 在本地存储中添加新数据。
2. 在本地存储中更新已有数据。
3. 在本地存储中移除数据。

当本地存储中的数据发生变化时，所有同源窗口（即来源于同一个域名、协议和端口）下的浏览器窗口都会收到该事件的通知。

如何使用

要使用 storage 事件来监听本地存储的更改，我们需要在页面中添加以下代码：

window.addEventListener('storage', function(event) {
  console.log(event);
});

上面的代码中，我们通过 addEventListener 方法在 window 对象上注册了一个 storage 事件的监听器，并在事件发生时打印出事件对象。

当本地存储中的数据发生变化时，该事件的回调函数会被触发，并且被传递一个事件对象 event，该对象包含以下属性：

• key ：发生变化的数据的键名。
• newValue ：变化后的数据值。
• oldValue ：变化前的数据值。
• url ：触发该事件的窗口的 URL。

我们可以通过 event 对象来获取发生变化的数据的相关信息，并做出相应的响应。

示例

// 添加本地存储数据
window.localStorage.setItem('name', 'John');

// 监听本地存储更改
window.addEventListener('storage', function(event) {
  if (event.key === 'name') {
    console.log('name changed from', event.oldValue, 'to', event.newValue);
  }
});

// 更新本地存储数据
window.localStorage.setItem('name', 'Tom');

上面的代码中，我们首先在本地存储中添加了一个名为 name 的数据项，并使用 addEventListener 方法在 window 对象上注册了一个 storage 事件的监听器。当 name 数据项变化时，我们打印出其变化前后的值。

接着，我们更新了本地存储中的 name 数据项的值，这时候 storage 事件的回调函数就会被触发，我们就可以在回调函数中做出相应的处理了。

总结

使用 storage 事件可以很方便地监听本地存储的变化，并在变化发生时做出相应的响应。在实际开发中，我们可以利用该事件来实现一些实时的状态同步等功能。但需要注意的是，该事件仅在同源窗口之间生效，如果要实现跨域的本地存储同步，还需要借助其他方法。