本地存储活动获胜'不要在铬中燃烧

Local Storage event won't fire in Chrome

本文关键字：燃烧 存储 活动 获胜      更新时间：2023-09-26

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

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

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

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

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

现在，存储事件应该可以像预期的那样处理本地文件。

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

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

您可以始终使用像localDataStorage这样的实用程序来处理此问题，其中每当键值发生更改时，都会在同一窗口/选项卡中触发事件，例如由set或remove方法所做的事件。您还可以使用它透明地设置/获取以下任何"类型"：数组、布尔值、日期、浮点值、整数、Null、对象或字符串。

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

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

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
);
相关文章：