Window: storage 事件

当在另一个文档的上下文中修改存储区域（localStorage 或 sessionStorage）时，Window 接口的storage 事件将会触发。

此事件不可取消，也不会冒泡。

注意：这不会在正在进行更改的相同浏览上下文中生效——它实际上是域上其他使用存储的浏览上下文同步所做更改的一种方法。其他域上的浏览上下文无法访问相同的存储对象。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("storage", (event) => {});
onstorage = (event) => {};

事件类型

一个StorageEvent。继承自Event。

Event StorageEvent

事件属性

key 只读

返回一个字符串，其中包含已更改的存储项的键。当更改是由存储 clear() 方法引起时，key 属性为 null。

newValue 只读

返回一个字符串，其中包含已更改的存储项的新值。当更改是由存储 clear() 方法调用或存储项已从存储中删除时，此值为 null。

oldValue 只读

返回一个字符串，其中包含已更改的存储项的原始值。当存储项是新添加的并且因此没有先前值时，此值为 null。

storageArea 只读

返回一个Storage对象，该对象表示受影响的存储对象。

url 只读

返回一个字符串，其中包含存储发生更改的文档的 URL。

事件处理程序别名

除了 Window 接口之外，事件处理程序属性 onstorage 也在以下目标上可用

示例

当 storage 事件触发时，将 sampleList 项记录到控制台

js
window.addEventListener("storage", () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
});

可以使用 onstorage 事件处理程序属性实现相同的操作

js
window.onstorage = () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
};

规范

规范
HTML 标准
# event-storage
HTML 标准
# handler-window-onstorage

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅