页面数据关闭，或刷新，或链接到其他页面提示有否保存数据_页面根据数据是否变化决定能否保存-优快云博客

本文介绍如何通过JavaScript的onbeforeunload事件来提示用户在未保存更改前不要离开页面，有效避免用户意外关闭浏览器导致的数据丢失。文章提供了一个简单的示例，展示了如何判断用户是否有未保存的改动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：在我开发过程中遇到的需求，当用户在修改或新增某些数据时可能会忘记保存就关闭页面或者链接到其他页面去，如果没有提示那么幸幸苦苦的填的数据就会丢失

解决办法： window.onbeforeunload 这个事件

onbeforeunload 事件是在即将离开此页面之前触发（包括刷新，关闭页面，跳转到其他页面），会弹出提示框是否离开此页面，

基本用法

<!---可以添加自己的方法->

return “提示信息”
}
</script>

说明：如果有return那么他会弹出提示框，否则将直接跳转，不会提示，利用这个特性可以判断用户输入的数据是否改变，如果有改变则提示，没有改变则不提示，直接跳转

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onbeforeunload = function () {

//
var oListen = document.getElementById("IsChanged").value;
if (oListen == "true") {
return "数据未保存是否离开?";
}
}
</script>
</head>
<body>
测试跳转页面弹出提示
<a href="http://www.baidu.com"> baidu</a>
改变： <input type="text" id="text1" onchange="document.getElementById('IsChanged').value = 'true';" />

在需要监听的文本框加onchange事件，改变就让隐藏的input的值改变，最后再判断
<button onclick="document.getElementById('IsChanged').value = 'false';alert('已保存');">保存</button>

如果用户保存了就将值改变回来
<input type="hidden" id="IsChanged" />
</body>
</html>