javascript - 在离开页面之前获取 Ajax 请求以完成

Question

我有一个 js 更改事件，它在用户离开控件时通过 Ajax 请求保存数据。这工作正常，除非用户决定离开页面。然后 Ajax 不会完成并且不会保存数据。看着Ajax request with JQuery on page unload我看到如果我使请求同步，Ajax 请求将会完成。我已经试过了，它确实有效。但是，每当用户在页面上从一个控件移动到另一个控件时，我都会调用此更改事件，我不希望所有这些调用都是同步的。

我尝试使用 Alert for unsaved changes in form检查未保存的数据。当存在未保存数据的控件时，这会很好地触发 beforeunload 函数，但是我不知道要在 beforeunload 函数中放入什么。

• 我可以发出警报。当用户取消警报时，我的更改代码运行并且一切正常。然而，当用户通常无需执行任何操作即可保存数据时弹出对话框，这让用户感到恼火和困惑
• 我试过了 Using jQuery to test if an input has focus找到具有焦点的元素，然后强制我的更改功能在此运行。但是，我找不到具有焦点的元素(可能这里做错了什么？)
• 我尝试使用休眠函数让 Ajax 调用有时间运行，但这也不起作用
• 我尝试将焦点设置到另一个控件中 - 没有成功

关于我还可以尝试什么或者我尝试过的任何事情我可能做错了什么有什么想法吗？我能否以某种方式拥有无需用户执行任何操作即可触发和取消的不可见警报？

Answer 1

在用户离开页面时保存数据的唯一好的解决方案是继续离线保存数据 (localStorage) 并在用户离开页面时提醒他们是否尚未将数据保存到服务器。 localStorage 的好处是，即使计算机崩溃或连接丢失，数据也会保存到浏览器中。当用户重新连接时，您可以将数据同步回服务器。
更多关于离线浏览器存储:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
http://diveintohtml5.info/storage.html