iFrame 关闭时会话存储未重置答案

【问题标题】：Session Storage not reset when iFrame closediFrame 关闭时会话存储未重置
【发布时间】：2020-05-21 17:26:31
【问题描述】：

我面临的问题是，当关闭一个 iframe 并再次打开另一个具有相同目的地的 iframe 时，sessionStorage 似乎仍然是从我打开的最后一个 iframe 填充的。我预计会话存储将被重置并重新开始。

我的 iframe 在它自己的组件中，我将其显示为模式弹出窗口。关闭模式时，我验证了 onDestroy 函数正在被调用，并且似乎组件正在被拆除，并且 iframe 应该从 DOM 中删除。

我还尝试通过 id 专门获取 iframe，并在 onDestroy 函数中将其从 parentNode 中删除，以防它没有被正确删除，但这仍然没有任何区别。

我还尝试使用 beforeunload 事件并在 iframe 中的页面关闭之前清除会话存储...但是当关闭包含 iframe 的对话框（组件）时，似乎没有触发事件或处理程序没有被触发。下面是我用来处理 beforeunload 事件的代码（角度）：

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    console.log("unload event");
  }

有什么方法可以在 iframe 关闭时强制清除会话存储？这是会话存储运行方式中的错误，还是使用会话存储时的预期行为？

【问题讨论】：

【解决方案1】：

根据documentation，这是sessionStorage 的预期行为。它的范围仅限于浏览器选项卡/窗口，按域隔离，并在关闭浏览器或选项卡时被清除。但是，根据定义，iframe 既不是浏览器选项卡也不是窗口，而实际上它可能指向不同的域。清理它的“自然”方式是关闭浏览器/选项卡。

要以编程方式执行此操作，一种解决方案是通过window.postMessage 与 iframe 通信应用程序模式正在关闭。像这样，加载到 iframe 中的应用程序可以自行清理存储。但是您可能无法在 iframe 中修改应用程序的代码。

另一种解决方案是通过反向代理在与您的主应用程序相同的域中为 iframe 应用程序提供服务。然后存储将在两个应用程序之间共享，您应该能够在调用模态 onDestroy 方法时清除它：

onDestroy() {
  sessionStorage.clear();
}

【讨论】：

这是一种有趣的方法，并且在基于关闭事件（通过 postMessage）清除存储时会起作用。我想知道这种方法在每种情况下如何工作......通常挂钩到 onbeforeunload 之类的东西是您可以确保在关闭页面时始终触发的东西，无论它是如何关闭的。但是使用 postMessage 依赖于使用该方法关闭它的事实。我将不得不调查它并确保没有我会丢失的边缘情况。感谢您的回复！

【解决方案2】：

你试过跑步吗

window.sessionStorage.clear;

在你的生命周期 onDestroy 方法中？

如有需要，请随时将此答案移至评论。

【讨论】：

【解决方案3】：

加载页面时清除它怎么样？

【讨论】：