本文介绍如何利用 localstorage 持久化记录用户关闭前的模态框（modal）id，并在页面重新加载时自动跳转至该模态框；同时扩展实现「12 小时后自动唤醒」功能，兼顾用户体验与技术可行性。
本文介绍如何利用 localstorage 持久化记录用户关闭前的模态框（modal）id，并在页面重新加载时自动跳转至该模态框；同时扩展实现「12 小时后自动唤醒」功能，兼顾用户体验与技术可行性。
在基于 URL hash 控制模态框显示（如 #openModal2）的纯前端方案中，用户意外关闭模态框（例如点击遮罩层、按 Esc 或浏览器后退）会导致当前状态丢失。为实现“断点续播”式体验——即关闭后 12 小时内再次访问首页时自动恢复到上次停留的模态框——需结合客户端存储与定时策略。
✅ 核心思路：状态捕获 + 延迟触发
由于浏览器无法在页面未打开时执行 JavaScript，“12 小时后自动弹出”不能依赖后台定时任务，而应采用“首次访问检查 + 延迟跳转”的轻量方案：
- 用户关闭模态框时（监听 hashchange），不仅保存当前 modal ID，还记录时间戳；
- 页面加载时，读取存储的状态，若距上次关闭未超 12 小时，则延迟触发 location.hash 跳转（避免阻塞首屏）；
- 若已超时或无有效状态，则回退至默认模态框（#openModal1）。
? 实现代码（含时间控制）
const MODAL_KEY = 'lastActiveModal';
const EXPIRY_HOURS = 12;
// 打开指定模态框（保持原有逻辑）
const openModal1 = () => { window.location.hash = '#openModal1'; };
const openModal2 = () => { window.location.hash = '#openModal2'; };
const openModal3 = () => { window.location.hash = '#openModal3'; };
function start() { openModal2(); }
function btn_next() { openModal3(); }
// 保存当前模态框及时间戳
function saveModalState(hash) {
if (hash && hash !== '#close') {
const state = {
hash: hash,
timestamp: Date.now()
};
localStorage.setItem(MODAL_KEY, JSON.stringify(state));
}
}
// 检查并恢复模态框（带过期判断）
function restoreModalIfValid() {
const saved = localStorage.getItem(MODAL_KEY);
if (!saved) {
openModal1();
return;
}
try {
const { hash, timestamp } = JSON.parse(saved);
const expiryMs = EXPIRY_HOURS * 60 * 60 * 1000;
if (Date.now() - timestamp < expiryMs) {
// 延迟执行，避免干扰初始渲染
setTimeout(() => {
window.location.hash = hash;
}, 300);
} else {
// 已过期，清理并重置
localStorage.removeItem(MODAL_KEY);
openModal1();
}
} catch (e) {
console.warn('Invalid modal state in localStorage', e);
localStorage.removeItem(MODAL_KEY);
openModal1();
}
}
// 监听 hash 变化并持久化
window.addEventListener('hashchange', () => {
saveModalState(location.hash);
});
// 初始化：页面加载时尝试恢复
document.addEventListener('DOMContentLoaded', restoreModalIfValid);
// 【可选】重置按钮
function btn_reset() {
localStorage.removeItem(MODAL_KEY);
console.log('Modal state cleared.');
}? HTML 与 CSS 补充说明
- 保持原有 HTML 结构不变，仅需确保每个模态框 id 与 JS 中调用一致（如 #openModal1）；
- 关闭链接 X 会触发 hashchange 事件，自动保存上一个非 #close 的 hash 值；
- CSS 部分无需修改，.modalDialog:target 伪类天然支持 hash 驱动显示。
⚠️ 注意事项与最佳实践
- 隐私与兼容性：localStorage 在 Safari 无痕模式下可能被禁用，建议增加 try/catch 容错（如上所示）；
- 时间精度：依赖客户端时间，若用户手动修改系统时间可能导致误判，生产环境可考虑服务端下发时间基准（需额外 API 支持）；
- 用户体验优化：延迟跳转（setTimeout(300)）可防止模态框在 DOM 渲染完成前闪动；如需更平滑效果，可配合 CSS opacity 过渡或添加加载态提示；
- 清理策略：btn_reset() 提供手动清除入口，便于测试与用户自主控制；
- 扩展性提示：如需支持多用户/多设备同步，应迁移到 IndexedDB + 后端存储方案。
通过上述实现，你将获得一个零依赖、高兼容、符合现代 Web 最佳实践的模态框状态持久化方案——既解决了“关闭即丢失”的痛点，又以合理方式兑现了“12 小时后继续”的产品承诺。
