jquery - 使用 "unload"事件自动保存并在注销时调用 ajax : order of actions is causing an issue

Question

我正在在线编辑器上使用自动保存功能。

当用户离开页面时(通过 unload 或 beforeunload 事件检测到)，我将发送 AJAX 请求 (async = false) 来保存数据。

我在 Firefox 中遇到问题，有时在 Chrome 中也遇到问题，因为发生了一系列事件:

• 事件已触发
• 请求发送
• 页面更改且用户断开连接
• 服务器分析请求 => 问题!
• 浏览器收到请求响应

当然，由于用户已断开连接，因此无法处理“保存”请求。

有没有一种方法可以与所有浏览器兼容，在页面实际更改之前等待 AJAX 调用的响应？

Answer 1

ori的回答是正确且完整的。

但从您的情况来看，您可以使用解决方法。

您可能对两个 JavaScript 功能感兴趣: localStorage 和 sessionStorage(除了浏览器关闭时清除第二个存储之外，它是相同的，因此您可能会选择第一个)

这个想法是将数据保存到 localStorage，并使用一些元数据来说明是否保存了更改。如果用户离开页面但转到您服务中的另一个页面，甚至稍后返回 - 您可以再次发送数据，并包含一些由于页面卸载而未保存的信息。

概念验证代码:

$(window).bind('unload', function() {
    localStorage.setItem('unsavedData',data);
    localStorage.setItem('unsaved',true);
});

$(document).ready(function(){
    if(localStorage.getItem('unsaved')){
       //ajax send 
       localStorage.setItem('unsaved',false);
    }
});

[编辑]

我已经成功地将 JSONP 与 unload 一起使用，并且它似乎在大多数情况下都能工作，但我还没有在负载和慢速网络上测试它。