以编程方式模拟存储事件

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，以使事件在指向相同原点的任何其他窗口上触发并侦听存储事件：

\n\n

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

\n\n

输出：

\n\n

storage event \nStorageEvent {\n  isTrusted: true,\n  key: "test",\n  oldValue: null,\n  newValue: "value1",\n  url: "about:blank",\n  \xe2\x80\xa6\n}\n

\n