如何在HTML/JavaScript中根据onbeforeunload弹窗返回值修改变量

onbeforeunload确实没法直接捕获用户点击「确认离开」还是「取消」的操作——浏览器为了安全限制了这个事件的回调能力，没法在弹窗里绑定自定义点击事件。不过可以通过pagehide事件来实现你的需求：当用户确认离开页面时，pagehide会触发，这时我们就可以更新localStorage和isSaved变量。

修改后的完整代码： #

首先保留body的onbeforeunload绑定：

<body onbeforeunload="return saveConfirm()">

然后更新JS部分：

let isSaved = localStorage.getItem("saved") === "true"; // 页面加载时从localStorage读取初始值

window.onload = function() {
    document.getElementById("togbtn-PriPumpDirBtn").addEventListener("click", () => {
        isSaved = false;
        localStorage.setItem("saved", isSaved.toString()); // 存字符串，避免类型转换问题
    });
};

function saveConfirm() {
    if (!isSaved) { // 直接用变量判断，比重复读取localStorage更高效
        return "您有未保存更改，重启minimax后更改将丢失！";
    }
}

// 监听pagehide事件：用户确认离开（刷新/关闭/跳转）时触发
window.addEventListener("pagehide", () => {
    if (!isSaved) {
        isSaved = true;
        localStorage.setItem("saved", "true");
    }
});

关键说明： #

• 页面加载时直接从localStorage初始化isSaved变量，避免后续重复读取本地存储
• 点击按钮时将isSaved设为false，同时把字符串"false"存入localStorage（因为localStorage仅支持存储字符串，直接存布尔值会被自动转成字符串）
• 若用户点击弹窗的「取消」，pagehide事件不会触发，变量保持不变，下次触发onbeforeunload时依然会弹出提示
• 若用户确认离开，pagehide事件触发，此时将isSaved和localStorage改为true，后续刷新页面就不会再看到未保存更改的弹窗

这个方案完全匹配你的需求，既保留原有功能，又解决了重复弹窗的问题。

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