如何在页面卸载时执行ajax调用？

Question

我有一个仪表板，用户可以在其中切换一些输入值，以便配置页面的外观。

我想将这些更改存储在数据库表中，因此当用户返回时，根据从数据库中检索到的特定用户配置显示仪表板。

我知道如何将这些值发送到数据库以及如何检索它们

每次用户更改配置时，我都不想进行ajax调用。

相反，我认为这种情况会更好：

1. 页面加载（检索数据库配置，如果存在）
2. 用户切换配置ui项目（例如复选框，选择等）并发生相应的客户端更改（某些div隐藏，其他一些显示等，配置输入值存储到一个隐藏的字段），但没有ajax调用发生。
3. 当用户点击指向另一个页面的链接时，配置输入值（已存储到隐藏字段）将通过ajax调用发送到DB。

我的问题

一个解决方案（？）就是使用onbeforeunload这样的事件：

window.onbeforeunload = function(e) {
   // Perform the ajax call
   return 'Do you want to save the configuration changes?';
};  

但是，如果用户的浏览器阻止弹出窗口，该功能将无法执行？

有没有办法在onbeforeunload事件上执行ajax调用，而无需调用对话框？

Answer 1

没有。在卸载期间，浏览器将终止所有挂起的请求。因此AJAX可能会或可能不会到达服务器。您也无法在beforeunload事件的处理程序中执行此操作，因为AJAX中的第一个A表示：异步 - ＆gt;只需将请求放在堆栈上，最终执行它。因此，只有在处理程序返回后才会查看请求。但在此之后不久，浏览器将杀死与该页面相关的任何内容。

解决方案是在用户进行更改时始终向服务器发送更新。将它们放入一个特殊的“临时”表中，以后可以从中恢复状态。

您也可以在浏览器中使用类似localStorage的内容，但随后数据不会随用户移动。例如，如果他们在平板电脑上工作并且断电或断电，他们可以移动到他们的PC继续他们离开的地方。

Answer 2

您无法保证以这种方式完成Ajax调用，请参阅Aaron的回复。我的建议是使用localStorage之类的东西来代替读/写用户的设置。

如果您需要用户的外观在多个设备上保留，请添加定期请求以将最近的更新从localStorage读取/写入中央数据库。