beforeunload 事件不可靠，仅支持同步提示且无法自定义文案；现代浏览器统一显示“离开此页面？”，需用 e.preventDefault() 和 e.returnValue = '' 注册，且监听器不能被移除或覆盖。
beforeunload 事件不是可靠的数据保存钩子，浏览器已大幅限制其行为——它只允许同步弹窗提示（且仅限用户主动触发的导航），不能执行异步操作，也不能自定义提示文案（现代浏览器统一显示“离开此页面？”，忽略 return 值）。
为什么 beforeunload 的 return 字符串不生效
Chrome 51+、Firefox 44+、Edge 79+ 等主流浏览器已移除对 event.returnValue 自定义文本的支持。即使你写 event.returnValue = "请保存数据"，用户看到的仍是浏览器统一提示。这是出于防钓鱼策略，不可绕过。
- 旧写法（无效）：
event.returnValue = "未保存，确定离开？" - 新写法（必须）：
event.preventDefault()+ 同时设置event.returnValue = ""（或任意真值） - 仅当事件监听器是「直接绑定」且「未被移除」时才有效；用
addEventListener绑定后，不能中途removeEventListener，否则失效
如何正确注册并保持 beforeunload 生效
必须在页面生命周期早期注册，且避免被框架/库覆盖或清理。React/Vue 等框架常在组件卸载时自动移除监听器，导致失效。
- 推荐在
script标签中直接写（非模块作用域）：window.addEventListener('beforeunload', (e) => { if (hasUnsavedChanges) { e.preventDefault(); e.returnValue = ''; // 必须存在，值本身无关紧要 } }); - 不要在 React
useEffect的 cleanup 函数里调用removeEventListener，否则监听器提前消失 - 避免用箭头函数声明后又试图移除（
removeEventListener无法匹配箭头函数引用）
beforeunload 不会触发的常见场景
这个事件有明确的触发边界，很多你以为“页面要关了”的情况它根本不会触发。
- 页面崩溃、进程被杀、系统休眠/断电 → 无事件
- 单页应用（SPA）内部路由跳转（如
react-router的Link或history.push）→ 不触发（需用路由守卫替代） - 调用
location.replace()或location.assign()→ 触发 - 调用
location.href = ...或表单提交 → 触发 - 刷新页面（F5 / Ctrl+R）→ 触发；但强制刷新（Ctrl+Shift+R）可能跳过
真正需要持久化用户输入时，别依赖 beforeunload —— 它只是最后一道微弱防线。实时保存（如 input 节点的 debounce 存 localStorage）、定期快照、以及服务端草稿机制，才是关键。而 beforeunload 的唯一合理用途，是防止用户误操作丢失尚未提交的编辑状态，且必须接受它的不可靠性。
