javascript - 以编程方式模拟存储事件

Question

如果我设置 localStorage项目然后StorageEvent正在为除当前之外的所有同域窗口触发。

如果我提高 StorageEvent然后以编程方式 StorageEvent仅针对目标窗口触发。
代码示例:

var evt = document.createEvent('StorageEvent');
evt.initStorageEvent('storage',false,false,'key','oldValue','newValue',
                  'http://example.com',window.localStorage);
window.dispatchEvent(evt);

我可以修改代码示例来模拟 window.setItem 的行为吗？

Answer 1

您可以创建一个指向同一原点的 iframe(about:blank 符合条件)并设置一个 localStorage contentWindow 中的值要在指向同一来源并监听存储事件的任何其他窗口上触发事件:

window.addEventListener('storage', function(e) {console.log('storage event', e)});
iframe = document.createElement('iframe');
iframe.src = 'about:blank';
document.body.appendChild(iframe);
iframe.contentWindow.localStorage.setItem('test', 'value1');

输出:

storage event 
StorageEvent {
  isTrusted: true,
  key: "test",
  oldValue: null,
  newValue: "value1",
  url: "about:blank",
  …
}