企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## 第三节:事件 `Storage`接口储存的数据发生变化时,会触发 storage 事件,可以指定这个事件的监听函数。 ~~~ window.addEventListener('storage', onStorageChange); ~~~ 监听函数接受一个`event`实例对象作为参数。这个实例对象继承了`StorageEvent`接口,有几个特有的属性,都是只读属性。 * `StorageEvent.key`:字符串,表示发生变动的键名。如果 storage 事件是由`clear()`方法引起,该属性返回`null`。 * `StorageEvent.newValue`:字符串,表示新的键值。如果 storage 事件是由`clear()`方法或删除该键值对引发的,该属性返回`null`。 * `StorageEvent.oldValue`:字符串,表示旧的键值。如果该键值对是新增的,该属性返回`null`。 * `StorageEvent.storageArea`:对象,返回键值对所在的整个对象。也说是说,可以从这个属性上面拿到当前域名储存的所有键值对。 * `StorageEvent.url`:字符串,表示原始触发 storage 事件的那个网页的网址。 下面是`StorageEvent.key`属性的例子。 ~~~ function onStorageChange(e) { console.log(e.key); } window.addEventListener('storage', onStorageChange); ~~~ > 注意,该事件有一个很特别的地方,就是它不在导致数据变化的当前页面触发,而是在同一个域名的其他窗口触发。也就是说,如果浏览器只打开一个窗口,可能观察不到这个事件。比如同时打开多个窗口,当其中的一个窗口导致储存的数据发生改变时,只有在其他窗口才能观察到监听函数的执行。可以通过这种机制,实现多个窗口之间的通信。