在 Web 开发中，我们经常需要在页面即将卸载（unload）时执行一些操作。然而，在某些情况下，我们希望知道卸载事件是由用户的哪种行为引起的，例如是因为用户点击了浏览器的刷新按钮、后退按钮，还是直接关闭了浏览器窗口。在本文中，我们将介绍如何使用 JavaScript 检测这些情况。
方案1：使用 Navigation Timing API
Navigation Timing API 提供了很多有关页面导航和加载的信息，包括页面开始加载的时间、页面完成加载的时间、每个资源的加载时间等等。它还提供了一个名为 performance.navigation 的对象，其中包含了许多有用的信息。
通过检查 performance.navigation.type 属性，我们可以知道最近的页面转换类型。该属性返回以下四个可能的值之一：
- 0: TYPE_NAVIGATE - 页面刚刚打开
- 1: TYPE_RELOAD - 用户刷新了页面
- 2: TYPE_BACK_FORWARD - 用户点击了浏览器的后退或前进按钮
- 255: TYPE_RESERVED - 表示无效值
因此，在 unload 事件中，我们可以使用以下代码来确定页面转换类型：
-- -------------------- ---- -------
--------------------------------- --------------- -
------ ----------------------------- -
---- --
----------------------
------
---- --
-----------------------
------
---- --
--------------------------------
------
--------
-------------------
------
-
---方案2：使用 sessionStorage
如果您不想使用 Navigation Timing API，也可以考虑使用 sessionStorage。在 unload 事件中，我们可以将一个标志位存储在 sessionStorage 中。然后，在页面加载时，我们可以检查该标志位来确定上一次卸载事件是由哪种行为引起的。
以下是一个示例代码：
-- -------------------- ---- -------
--------------------------------------- --------------- -
------------------------------------- ------
---
------------------------------- --------------- -
-- --------------------------------------- -
-----------------------------------------
-----------------------------------------
- ---- -
----------------------
-
---总结
在本文中，我们介绍了两种方法来检测 unload 事件是由哪种行为引起的。Navigation Timing API 是一种用于获取更多有关页面加载和导航的信息的强大工具。而使用 sessionStorage 则更加简单，但需要在页面加载时进行一些额外的检查。根据您的特定需求，您可以选择一种适合您的方案。
希望本文能对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30849
