Question

我有一个单页应用程序，我需要对localstorage中的每个更改做出反应，它看起来像：

    MyComponent {

    someFuncWhichIsCalledEveryTimeWhenLocalStorageChanges() {
        console.log('local storage changed!);
    }

    funcThatChangesLocalStorage() {
        localstorage.setItem('key',val);
        localstorage.getItem('key')
    }

    }

我尝试使用localstorage事件：

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

但那没有用。所以我正在考虑使用Observable<>，只是不知道如何正确实施。

Answer 1

iframe works

确保使用正确的event properties。

Here is a basic example of the event listener.

Answer 2

localDataStorage 界面（HTML5 localStorage API的便捷包装器）方便地在存储所在的同一页面/标签/窗口中触发更改事件事件发生了。免责声明：我是该界面的作者。

一旦安装了 localDataStorage ，此示例代码将使您看到那些更改事件：

function nowICanSeeLocalStorageChangeEvents( e ) { console.log( "subscriber: " + e.currentTarget.nodeName + "\n" + "timestamp: " + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" + "prefix: " + e.detail.prefix + "\n" + "message: " + e.detail.message + "\n" + "method: " + e.detail.method + "\n" + "key: " + e.detail.key + "\n" + "old value: " + e.detail.oldval + "\n" + "new value: " + e.detail.newval + "\n" + "old data type: " + e.detail.oldtype + "\n" + "new data type: " + e.detail.newtype ); }; document.addEventListener( "localDataStorage" , nowICanSeeLocalStorageChangeEvents , false );

Answer 3

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

https://developer.mozilla.org/en-US/docs/Web/Events/storage

Answer 4

来自MDN文档的

巨大警告：

[{window.addEventListener('storage', ...)]不能在进行更改的同一页面上工作–这实际上是域中其他页面使用存储来同步所做的任何更改的一种方式。

所以这可能就是为什么它对您（对我也是如此）不起作用的原因-您试图在同一页的其他部分上响应此侦听器。

Answer 5

如果你想在同一个文档中监听 storage change 事件，你可以添加一个 storage changed 事件发射函数，如下所示。当你使用localStorage.setItem("xx", "xx")，并在它之后触发这个函数，你会检测到事件~

export function emitStorageChangedEvent() {
  const iframeEl = document.createElement("iframe");
  iframeEl.style.display = "none";
  document.body.appendChild(iframeEl);

  iframeEl.contentWindow?.localStorage.setItem("t", Date.now().toString());
  iframeEl.remove();
}

观察js中的localstorage变化

5 个答案: