Question

我正在尝试添加一个事件侦听器，只要本地存储中的数据发生更改就会触发该事件侦听器。我在ComponentDidMount方法中添加了侦听器，如下所示：

componentDidMount() {
  window.addEventListener('storage', function(event) {
    console.log("Event");
    }
  );

但事件似乎从未在Chrome中引发过（它在Firefox中引发）。我用两个标签，两个窗口等试过它。我错过了什么吗？我认为Chrome能够支持本地存储功能。

Answer 1

如果您使用本地文件对此进行测试，Chrome会默认将本地文件（file:///*）相互“对话”作为安全措施。您可以通过使用--allow-file-access-from-files标记启动Chrome来禁用此限制：

chrome.exe --allow-file-access-from-files

现在，存储事件应该按预期使用本地文件。

Answer 2

我刚刚研究了同样的问题，并在通过脚本设置document.domain时发现了Chrome中存在的错误：https://bugs.chromium.org/p/chromium/issues/detail?id=136356

在这种情况下，localStorage已设置，但事件未被触发。

Answer 3

您总是可以使用像localDataStorage这样的实用程序为您处理此事件，每当键值发生更改时，在同一窗口/选项卡中触发事件，例如set或remove方法所做的事件。您还可以使用它透明地设置/获取以下任何＆＃34;类型＆＃34;：数组，布尔值，日期，浮点数，整数，空值，对象或字符串。

[免责声明]我是该实用程序的作者[/ DISCLAIMER]

实例化实用程序后，以下代码段将允许您监视事件：

function localStorageChangeEvents( e ) {
    console.log(
        "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
        "key: "           + e.detail.key     + "\n" +
        "old value: "     + e.detail.oldval  + "\n" +
        "new value: "     + e.detail.newval  + "\n"
    );
};
document.addEventListener(
    "localDataStorage"
    , localStorageChangeEvents
    , false
);

Chrome中不会触发本地存储事件

3 个答案: