dialog标签不保存状态，需用localStorage手动记录“是否已看过”：页面加载时读取标记，未见过则showModal()并立即setItem('seenWelcomeDialog','true')，写入须在showModal()后或用setTimeout确保持久化。
dialog 标签本身不保存状态，关闭后 open 属性自动移除，DOM 仍存在但不可见；要“记住用户是否已看过弹窗”，必须手动用 localStorage 记录并判断，否则每次刷新都会重显。
如何用 localStorage 控制 dialog 只显示一次
核心逻辑是：页面加载时读取 localStorage，若标记为已显示（如 seenWelcomeDialog: "true"），则跳过 showModal()；否则显示并写入标记。
- 不要在
DOMContentLoaded里直接调用showModal()，得先查存储 - 写入时机要选在真正显示之后（比如按钮点击后），或首次自动弹出后，避免误标
- 值建议用字符串
"true"/"false"，避免null或undefined判断出错 - 示例逻辑：
const dialog = document.getElementById('welcomeDialog'); const seen = localStorage.getItem('seenWelcomeDialog') === 'true'; if (!seen) { dialog.showModal(); localStorage.setItem('seenWelcomeDialog', 'true'); }
用户手动关闭后还想再触发，怎么重置 localStorage
如果产品需求支持“再次查看”（比如设置页有个「重新显示引导」按钮），就得提供清除逻辑。不能只靠 dialog.close()，它不改存储。
- 关闭按钮点击事件里，不写
localStorage.removeItem('seenWelcomeDialog')—— 这会让下次刷新又弹，通常不是想要的 - 应单独设一个“重置”按钮，绑定清除 + 后续手动调用
showModal() - 若需后台控制（如运营配置强制重弹），可存时间戳而非布尔值，对比有效期：
localStorage.setItem('lastDialogShown', Date.now().toString())
为什么 localStorage.setItem 放在 showModal() 前会失效
因为 showModal() 是同步方法，但浏览器渲染和焦点锁定有微小延迟；若 setItem 放在前面且紧接着页面跳转或报错，可能来不及持久化（尤其低端设备）。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：放在
showModal()之后，或监听dialog的aftertoggle事件（注意兼容性，目前仅 Chrome/Edge 支持） - 更通用方案：用
setTimeout(..., 0)微任务确保 DOM 状态稳定后再写存储 - 别依赖
close事件反向写localStorage—— 用户可能没点关闭，而是按 Esc 或点遮罩，但这些行为都触发close，反而造成重复写入
真正容易被忽略的是：Safari 对 localStorage 在无用户交互上下文（如页面刚加载、无点击）中写入有限制，首次自动弹窗 + 存储可能失败；必须确保至少有一次用户手势（比如点击按钮）后再操作存储才可靠。
