request.keepalive 属性用于控制请求在网络断开连接后是否继续传输。该属性通常用于在页面卸载时发送数据到服务器，确保数据不会丢失。
概述
当页面即将关闭或刷新时，有时需要发送一些数据到服务器，例如用户的未保存更改、分析数据等。这些数据可能很重要，如果因为网络问题或者页面快速关闭导致数据丢失，可能会造成不可逆的损失。此时，我们可以使用 keepalive 属性来确保这些数据能够被可靠地发送出去。
使用场景
- 用户未保存更改：用户编辑了一篇文章但尚未点击“保存”按钮就尝试离开页面，此时可以使用
keepalive属性将更改发送给服务器。 - 页面卸载时的清理工作：在页面卸载之前执行一些清理操作，比如记录用户的最后活动时间。
- 分析数据发送：收集用户的浏览行为数据，并在页面关闭时发送给服务器进行分析。
如何使用
创建请求对象
首先，我们需要创建一个 Request 对象，并设置 keepalive 属性为 true。
-- -------------------- ---- -------
----- ------- - --- --------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
-------- ------------
---
---------- ----
---发送请求
接下来，使用 fetch 方法发送这个请求。需要注意的是，由于浏览器限制，keepalive 请求只能发送到同源的 URL 上。
navigator.sendBeacon(request.url, request.body);
这里我们使用了 navigator.sendBeacon 方法，它会自动将 keepalive 设置为 true。如果你希望手动控制，也可以直接使用 fetch 方法。
-- -------------------- ---- -------
--------------
-------------- -- -
-- -------------- -
----- --- --------------
-
--------------------
--
------------ -- -
---------------------- -------
---页面卸载时触发请求
为了确保在页面关闭或刷新时发送请求，我们可以监听 beforeunload 或 unload 事件。不过，由于 beforeunload 和 unload 事件可能会被浏览器阻止执行复杂的脚本，所以推荐使用 navigator.sendBeacon 方法来发送数据。
window.addEventListener('beforeunload', (event) => {
// 使用 navigator.sendBeacon 发送数据
navigator.sendBeacon('/api/save', JSON.stringify({
content: '这是最后一篇未保存的文章'
}));
});注意事项
- 跨域限制：
keepalive请求只能发送到同源的 URL 上。 - 数据量限制：
navigator.sendBeacon方法对请求体的大小有限制（通常是 64KB），超过此大小的数据会被截断。 - 浏览器兼容性：
navigator.sendBeacon在所有现代浏览器中都得到了支持，但在旧版浏览器中可能不被支持。
总结
通过使用 request.keepalive 属性和 navigator.sendBeacon 方法，我们可以确保在页面卸载时重要数据能够可靠地发送到服务器。这对于提高用户体验和数据完整性非常有帮助。