关闭页面时如何将数据保存至localStorage，解决弹窗交互异常问题

你当前代码出现异常是Chrome安全限制直接导致的：

• 主流浏览器均禁止在beforeunload事件回调中触发confirm、alert等自定义弹窗，防止恶意站点恶意阻拦用户离开页面
• setTimeout属于异步执行逻辑，当用户确认原生离开提示后，页面销毁进程优先级远高于异步任务，你的自定义弹窗还没渲染完成页面就已经关闭，自然无法交互
• 你无法完全屏蔽浏览器原生的离开提示，也不能通过JS主动触发关闭用户手动打开的标签页，这属于浏览器的安全沙箱限制，没有绕过方案

这个方案不需要自定义弹窗，利用浏览器原生的离开提示，用户确认离开时自动同步保存数据，不需要额外交互：

// 全局计数变量，这里假设你已经在其他位置做了更新逻辑
let count = 0

function saveProgress() {
    // 同步存储到localStorage，beforeunload阶段的同步操作浏览器会等待执行完成
    localStorage.setItem("count", String(count))
}

window.onbeforeunload = function(e) {
    // 触发原生离开提示
    e.preventDefault()
    e.returnValue = "您有未保存的进度，确定要离开吗？"
    // 直接同步保存数据，不管用户最终选离开还是留下，先保存不会产生数据损失
    saveProgress()
    return e.returnValue
}

如果你确实需要只在用户确认离开的时候才保存，可以搭配pagehide事件实现：

window.addEventListener('pagehide', function(e) {
    // pagehide触发时代表页面确实要被卸载了，此时执行保存
    if (!e.persisted) { // 排除页面进入bfcache缓存的场景
        localStorage.setItem("count", String(count))
    }
})

window.onbeforeunload = function(e) {
    e.preventDefault()
    e.returnValue = "您有未保存的进度，确定要离开吗？"
    return e.returnValue
}

这个方案不能拦截用户点击浏览器关闭、刷新、地址栏跳转的操作，仅能处理你页面内的退出按钮、跳转按钮的场景：

let count = 0
// 绑定页面内自定义退出按钮的点击事件
document.querySelector('#exit-btn').addEventListener('click', function() {
    if (confirm("Are you sure you want to exit? Progress will be saved.")) {
        localStorage.setItem("count", String(count))
        // 仅当当前页面是通过JS打开的，才能用close关闭，用户手动打开的页面无法用JS关闭
        window.close()
    }
})

// 浏览器触发的离开操作还是走原生提示兜底
window.onbeforeunload = function(e) {
    e.preventDefault()
    e.returnValue = "您有未保存的进度，确定要离开吗？"
    localStorage.setItem("count", String(count))
    return e.returnValue
}

内容的提问来源于stack exchange，提问作者Jacob F