子弹窗写入父窗口localStorage后无法触发Storage事件监听问题

storage事件的触发有明确的W3C规范限制：只有当同源的其他浏览上下文（其他标签页、其他弹窗）修改了共享的localStorage存储时，当前页面才会收到storage事件；当前页面自身执行的localStorage写入操作，不会触发自身绑定的storage监听器。
你当前的实现是子窗口直接通过window.opener引用操作父窗口的localStorage，这个写入动作的执行上下文归属于父窗口，本质等价于父窗口自己修改自己的localStorage，自然无法触发父窗口的监听。
补充说明：你提到的“父窗口自身页面/控制台修改localStorage时监听器可正常触发”属于测试误差，正常情况下同页面内修改localStorage不会触发自身的storage事件，该现象大概率是测试时同时打开了其他同域标签页，其他页面的存储变更触发了监听。

以下两种方案都可实现需求，可根据业务场景选择：

方案1：最小改动，复用原生storage事件逻辑 #

不需要修改父窗口的事件绑定逻辑，只需要调整子窗口的写入目标即可：

• 同域的弹窗和父窗口本身共享同一份localStorage存储，不需要通过window.opener去引用父窗口的localStorage对象，子窗口直接写入自身的localStorage，父窗口作为“其他浏览上下文”就可以正常收到storage事件。

代码调整 #

子窗口原有错误写法：

// 错误：直接操作父窗口的localStorage，等价于父窗口自己改数据，不会触发事件
const selectedData = { id: 123, name: "选中条目" };
window.opener.localStorage.setItem("import_form_data", JSON.stringify(selectedData));

子窗口修正后写法：

// 正确：写入子窗口自身的localStorage，同域下父窗口会收到变更事件
const selectedData = { id: 123, name: "选中条目" };
localStorage.setItem("import_form_data", JSON.stringify(selectedData));
// 数据写入完成后可删除该key，避免后续重复触发监听
setTimeout(() => localStorage.removeItem("import_form_data"), 0);

父窗口建议补充key校验逻辑，避免无关存储变更干扰业务：

window.addEventListener('storage', function(e) {
    // 只监听约定好的业务key
    if (e.key === 'import_form_data' && e.newValue) {
        const formData = JSON.parse(e.newValue);
        // 执行表单字段填充逻辑
        alert('检测到导入数据，开始填充表单');
    }
});

方案2：直接调用父窗口全局方法，稳定性更高 #

如果不想受storage事件的规则限制，可以跳过localStorage通信，直接通过父子窗口的引用关系调用全局方法，逻辑更可控，不会出现事件不触发的问题。

代码实现 #

父窗口提前挂载全局处理方法，不需要再绑定storage事件：

// 将数据处理逻辑挂载到window全局，供子窗口调用
window.handleFormDataImport = function(formData) {
    // 直接执行表单字段填充逻辑
    alert('收到导入数据，开始填充表单');
}

子窗口选中条目后直接调用父窗口方法即可：

const selectedData = { id: 123, name: "选中条目" };
// 先判断父窗口是否存在、未被关闭
if (window.opener && !window.opener.closed) {
    window.opener.handleFormDataImport(selectedData);
}
// 调用完成后可直接关闭弹窗
window.close();

两种方案都要求父子窗口完全同源，即协议、域名、端口三者完全一致。如果IIS上部署的多个站点绑定了不同端口、或分别使用http/https协议，会触发跨域限制，导致通信失败，部署时需要提前校验同源性。

内容的提问来源于stack exchange，提问作者NPCTL