真正模块化的全局提示需在document.body动态挂载唯一容器，用队列管理堆叠与zIndex，通过sessionStorage跨页传递，配合aria-alert实现可访问性，并确保DOM移除、定时器清除、无障碍属性重置才算彻底销毁。
全局提示组件必须独立于页面DOM结构
直接把提示元素写死在某个页面的 <div> 里，跨路由或跳转后就失效。真正模块化的全局提示，得在 document.body 动态挂载一个专属容器，且只挂一次。否则多个页面重复初始化，会生成多个容器，样式错乱、事件冲突、内存泄漏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.getElementById('global-toast-container')查找容器，不存在才创建并appendChild到body - 容器本身不带任何样式，只作为定位锚点，所有样式由提示单元自身控制
- 避免使用
innerHTML = ''清空容器——会销毁已绑定的事件监听器；应遍历子节点调用remove()
堆叠管理必须靠 CSS z-index + JS 队列控制
用户连续触发多次提示（比如连点三次保存按钮），不能让新提示覆盖旧提示，也不能堆成一堵墙顶到屏幕外。纯靠 z-index 数值递增是无效的：CSS 层叠上下文会重置层级，且无法感知生命周期。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 维护一个数组队列
toastQueue = []，每个提示对象含id、el、timer - 新提示插入队列尾部，同时给其 DOM 元素设置
style.zIndex = 1000 + toastQueue.length - 关闭时从队列中
splice删除，并重排剩余项的zIndex，防止数字溢出 - 顶部提示默认
top: 20px，后续每个提示top基于前一个的getBoundingClientRect().bottom + 12动态计算
跨页面提示依赖 sessionStorage 而非 localStorage
localStorage 是持久化存储，页面刷新或用户多标签操作时极易残留过期消息；而 sessionStorage 在页面会话结束（标签页关闭）时自动清空，天然适配“一次跳转，一次提示”的语义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 跳转前写入：
sessionStorage.setItem('pendingToast', JSON.stringify({ message: '保存成功', type: 'success' })) - 目标页
DOMContentLoaded后立即读取并消费：sessionStorage.removeItem('pendingToast') - 务必加防抖：若同一页面被快速加载多次（如 SPA 路由复用），需检查
performance.navigation.type === 1（即 reload）才处理，避免重复触发 - 不要监听
beforeunload清理 —— 该事件不可靠，Chrome 80+ 已限制其执行能力
可访问性不能只靠 aria-live
仅给提示容器加 aria-live="polite"，对屏幕阅读器用户来说信息可能被吞掉或延迟播报。真正有效的提示，必须满足“出现即宣告、消失即静默”两个条件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次创建提示元素后，立即调用
el.setAttribute('role', 'alert')——alert优先级高于polite，强制中断当前播报 - 提示移除前，先
el.setAttribute('aria-hidden', 'true')，再el.remove()，避免屏幕阅读器读到半截 DOM - 禁止用
opacity: 0或visibility: hidden隐藏提示 —— 它们仍存在于无障碍树中，会被误读 - 键盘用户按
ESC关闭时，焦点必须回到触发源（如按钮），否则会丢失上下文
