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

Question

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

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

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

每次用户更改配置时,我都不想进行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 意味着:异步 - >只需将请求放在堆栈上并最终执行它.因此,只有在处理程序返回后才会查看请求.但在此之后不久,浏览器将杀死与页面相关的任何内容.

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

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