使用“卸载”自动保存注销时的事件和 ajax 调用：操作顺序导致问题

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 一起使用，并且它似乎在大多数情况下都能工作，但我还没有在负载和慢速网络上测试它。

Answer 2

不可以。您只能向用户显示一个确认对话框：

$(window).bind('beforeunload', function() {
    // AJAX

    return 'STRING';
});

STRING 将显示在对话框中，然后您可能有时间在用户做出反应之前返回响应。

但这是阻止页面卸载的唯一方法，因此不会收到 ajax 响应。

Answer 3

在页面顶部放置一个固定的透明 div，并通过悬停事件来触发保存怎么样？只是从创造性的角度思考...保留您现在拥有的保存，但作为故障保护，我在想如果普通用户要导航离开，首先他们会将鼠标移至地址栏、后退按钮，或关闭按钮。如果您捕获 DOM 窗口的顶部，也许会在最后一刻获得更多成功的保存？

另外，您可以在 setTimeout() 上推送更改，但听起来您正在寻求比我的两个解决方案更有限的东西。

Answer 4

将 async 变为 false 会更容易。

否则，您可以使用 async:true 调用服务器，当它成功返回或出现错误时，您可以引发注销/重定向/错误消息的自定义事件。

悬停的透明 div 可用于让用户等待服务器响应。

Answer 5

我正在使用 onbeforeunload 进行类似的操作，但我的数据有效负载非常小（一个 guid），并且我不需要任何返回值，所以它是即发即忘。它在 95% 的时间内有效，但不同的浏览器以不同的方式实现 onbeforeunload、onunload 等。

您可以弹出另一个窗口，其中包含未保存的数据，然后在请求触发后关闭该窗口，但这里的关键元素是“pop” - 很可能会被阻止。上面的本地存储答案可以用这个。

当然，第一个解决方案 - 询问用户，然后让他们保存可能是最好的。也许他们正在关闭以防止保存自上次保存以来的任何更改？