在前端开发中，我们经常需要让用户填写表单或编辑内容。但是，当用户在离开页面之前没有保存更改时，可能会导致数据丢失，这对用户体验来说是一个非常糟糕的体验。
幸运的是，我们可以使用JavaScript编写代码来警告用户在离开页面之前保存他们所做的更改。下面是一些指导原则和示例代码。
监听窗口关闭事件
首先，我们需要在窗口关闭之前监听事件。这可以通过添加以下代码来实现：
window.addEventListener('beforeunload', function(event) {
// 在这里添加逻辑来警告用户
});beforeunload事件将在窗口将要关闭时触发。在此事件处理程序内，我们将添加警告消息以通知用户是否保存更改。
显示警告消息
接下来，我们需要显示警告消息。这可以通过使用window.confirm()方法来实现。例如：
-- -------------------- ---- -------
--------------------------------------- --------------- -
-- -------------------
-----------------------
----------------- - ---
-- ---------------------------------- -
-- ---------------
-----------------------
-
---在这个示例中，我们使用preventDefault()防止窗口关闭，然后显示一个确认对话框，询问用户是否要离开页面。如果用户点击“取消”按钮，则该事件处理程序返回false，防止窗口关闭。
提供保存更改的选项
最后，我们应该为用户提供保存更改的选项。这可以通过添加一个保存按钮来实现。例如：
-- -------------------- ---- -------
------
---- --------- ---
------- -------------------------
-------
--------
--------------------------------------- --------------- -
-- -------------------
-----------------------
----------------- - ---
-- ---------------------------------- -
-- ---------------
-----------------------
-
---
---------在这个示例中，我们将添加一个提交按钮来保存更改。当用户单击该按钮时，表单将被提交并窗口将关闭。
结论
通过添加前面提到的代码和技术，我们可以有效地警告用户在离开页面之前保存他们所做的更改。同时也为用户提供了保存更改的选项。幸运的是，这些操作都可以在前端代码中轻松实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8949