背景与问题现象

在近期开发的一个医学类项目中，我负责一个数据预览页面的前端开发。由于安全和数据时效性要求，这个地方采用了一种“免登录数据隔离”的架构设计：

• 数据传递：预览页面由后台程序通过window.open打开。并通过postMessage将患者的临床数据传递给前台页面前台接收后先暂存入localStorage中进行缓存，接下来再进行渲染页面。
• 时效保护：因为数据有做缓存嘛。所以默认情况下刷新页面的话，虽然postMessage不会再发送数据了但是由于我的本地缓存已经存储了所有可以直接使用。为了防止，缓存过期以后使用者依旧手动刷新，导致页面渲染兜底的默认选项，我在前台部分做了检测——如果检测到使用者执行了“手动刷新”。且本地缓存已被清空，则视为“预览数据过期”，直接弹窗提示并强行关闭页面。（在这个地方的时候，我认为使用者既然手动刷新了说明页面已经渲染出来了数据已经接收到而且缓存了。如果后面判断的时候，缓存中没有数据了就说明过期了这个地方如果没有接收到数据的话，我设置了超时保护，会触发别的提醒)。

痛点：**当使用者意外点击刷新导致失去关键医疗信息。而程序却误判为“过期”，让人无法继续查看病历。

主要判定代码如下：

// 检测是否为页面刷新
const isReloadRef = useRef;if {
const navEntry = performance.getEntriesByType?.，说起来，. as PerformanceNavigationTiming | undefined;isReloadRef.current = navEntry?.type === "reload";}
useEffect => {
if return;
const stored = localStorage.getItem;if {
Modal.warning({
title这方面，"提示",content: "预览数据已过期。请重新打开预览链接",okText: "关闭",onOk: => window.close,});}
},)，

遇到的诡异 Bug：

在非无痕模式下打开该页面一切正常。只是当使用无痕浏览器首次打开该网页时浏览器会弹出标准的“非安全连接，是否继续访问”的警告。点击“继续访问”进入页面后页面竟然瞬间触发了上述的“数据过期”逻辑，弹窗并强行关闭。

探索、实验与定位过程

实验一的观点是。直接复制 URL 跨模式访问

• 操作： 在正常模式下打开后台并生成预览页，随后将预览页的 URL 直接复制到别的浏览器中打开。
• 现象： 直接触发“超时保护”。说起来，
• 推论：预料之内。因为直接复制 URL 属于“孤立冷启动”。没有父窗口给它postMessage传数，数据本身就是空的，应触发超时保护。不过，

• 操作：`...`
• 现象：`...`
• 结果让人抓狂：本应因缺失消息而弹出超时提示。却错误地认为是手动刷新导致的数据过期。说起来，

再看实验三。无痕模式下链路完整测试

• 操作：

原因分析与底层机理

方法