强制本地存储事件在同一窗口中触发答案

【问题标题】：forcing local storage events to fire in the same window强制本地存储事件在同一窗口中触发
【发布时间】：2022-05-05 15:29:33
【问题描述】：

从许多来源中，我发现本地存储事件仅在不引发更改的窗口/选项卡中触发。

我的问题是，有什么方法可以从同一个窗口检测到变化？或者可能覆盖强制事件在同一窗口/选项卡内触发的功能？

不包括该选项似乎不切实际，但我找不到方法。

谢谢

【问题讨论】：

Some already did。对于其他人，$(window).trigger("storage")（或本机等效项）应该这样做。
嗯，我以为我先尝试过，但没有成功。我会再试一次，谢谢
@Bergi 很好用，谢谢。如何包含格式正确的事件对象？
我试过了：$(window).trigger('storage', {}, {originalEvent: {key: 'selectedAdmins'}});
你自己把它们写成.originalEvent :-) 见jsfiddle.net/78e7puhn/2

标签： javascript html local-storage

【解决方案1】：

仅供参考，这就是我最终得到的结果。

localStorage.setItem('selectedOrgs', JSON.stringify(this.selectedOrgs));

// trigger the event manually so that it triggers in the same window
// first create the event
var e = $.Event("storage");

// simulate it being an actual storage event
e.originalEvent = {
    key: 'selectedOrgs',
    oldValue: prev,
    newValue: JSON.stringify(this.selectedOrgs)
};

// Now actually trigger it
$(window).trigger(e);

注意：我只使用 oldValue 和 newValue.. 如果您使用其他属性，请确保并正确设置它们。

您还可以覆盖 localStorage.setItem 以便它以类似的方式在当前窗口中触发。

【讨论】：

嘿，非常感谢您发布您的代码。但我不明白为什么我的事件仍然没有触发。 $(window).trigger(e);只在其他窗口触发？基本上，我只是想在进行更改的同一窗口中触发存储更改事件。这是我根据你的代码写的：pastebin.com/7EthAJ0f
那个jsfiddle根本不是一回事。它创建了一个恰好被称为storage 的自定义事件，然后触发它。如果您要更改事件对象中的键，您会看到它没有保存到 localStorage，键 '1' 会被设置但不会被触发。
虽然这可能无法从技术上回答这个问题，但我给了它一个加分，因为它是在集成测试期间模拟存储事件的好方法。谢谢！
谢谢！有效。对于任何感到困惑的人，他正在使用 jquery，如果您正在使用 react，npm install jquery 并像 import $ from 'jquery' 一样使用它，然后按照答案中提到的方式使用它，即 $(window).trigger('storage');。这是 jquery .trigger() api.jquery.com/trigger 的文档

【解决方案2】：

是的，你可以为每个标签生成唯一的 id 并比较它们，看看这家伙是怎么做的here 我发现的另一个解决方案基于相同的想法，生成并比较唯一的 ids..here

【讨论】：

【解决方案3】：

这很容易通过localDataStorage 处理，您可以在其中透明地设置/获取以下任何“类型”：Array、Boolean、Date、Float、Integer、Null、Object 或 String。当然，它也会在同一窗口/选项卡中为键值更改触发事件，例如由 set 或 remove 方法进行的更改。

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

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

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

【讨论】：

【解决方案4】：

当你想在同一个标签上触发它时，添加这一行

window.dispatchEvent(new Event("storage"));

为页面添加事件监听器

window.addEventListener('storage', storageEventHandler, false);

function storageEventHandler(e) {
    console.log("Hello!")
}

就是这样

【讨论】：