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

【问题标题】：Local Storage event won't fire in Chrome本地存储事件不会在 Chrome 中触发
【发布时间】：2019-10-01 12:26:07
【问题描述】：

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

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

但该事件似乎从未在 Chrome 中触发（它在 Firefox 中触发）。我已经用两个选项卡、两个窗口等进行了尝试。我错过了什么吗？我认为 Chrome 能够支持本地存储功能。

【问题讨论】：

this documentation 暗示这是一个 mozilla 功能，MDN 不知道其他浏览器是否支持它——它也只是最近才出现在 mozilla 中
我的 Chrome(51.0.2704.103) 版本会在从单独的选项卡进行更改时触发该事件。你能提供一个没有发生的示例演示吗？
localStorage event listener cannot fire in chrome的可能重复

标签： javascript google-chrome local-storage

【解决方案1】：

如果您使用本地文件对此进行测试，Chrome 会默认阻止本地文件 (file:///*) 相互“交谈”作为一项安全措施。您可以通过使用 --allow-file-access-from-files 标志启动 Chrome 来禁用此限制：

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

现在存储事件应该可以正常处理本地文件了。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您始终可以使用localDataStorage 之类的实用程序来为您处理此问题，只要键值发生更改（例如由 set 或 remove 方法进行的更改），就会在同一窗口/选项卡中触发事件。您还可以使用它来透明地设置/获取以下任何“类型”：Array、Boolean、Date、Float、Integer、Null、Object 或 String。

[DISCLAIMER] 我是该实用程序的作者 [/DISCLAIMER]

实例化该实用程序后，以下 sn-p 将允许您监视事件：

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
);

【讨论】：