如何在关闭期间保存页面状态

Question

当用户在没有首先保存其工作的情况下关闭浏览器窗口时,将Web应用程序的数据与服务器同步的可接受方式是什么？我正在谈论要么击中"X",要么按F5或其他东西.

一点背景:

有问题的webapp有一个主窗口,然后是从主窗口产生的子窗口,可以在子窗口中完成沙盒"工作".我无法控制这方面的实施.

用例:

在用户决定单击"确定"以在服务器上保留数据之前,每个子窗口都可以输入相当大量的信息.

我考虑/试过的事情:

• onbeforeunload如果有未保存的工作,则通过从事件处理程序返回字符串来进行简单的关闭确认.(问题:我的团队负责人不愿意允许特定于浏览器的" alert对话框"在webapp中.据他说:用户体验依赖于看起来丑陋的对话框.)
• 在onpageunload事件期间触发的AJAX请求将数据发送回服务器.(问题:由于永远不会调用XHR回调,我发现有些浏览器会打开连接,然后随机尝试触发打开的未来窗口的回调.)
• 在onpageunload事件期间触发了同步AJAX请求.(问题:忽略这样一个事实,包括我在内的人往往讨厌这样做以及它被弃用并将在未来删除的事实...... UI可能会长时间挂起等待AJAX​​请求完成,如果他们失去互联网,可能无限期.)
• 定期保存页面内容,或附加onchange/ onblur/ onwhateverelse事件处理程序.(问题:与上面和下面更"懒惰"的实现相比,大量的编码开销.)
• 使用localStorage以保持客户端机器上的改变农田,他们居然承诺其工作的服务器.(问题:浏览器支持......这需要支持尽可能多的地方支持XHR.客户端存储是否有广泛的支持？我认为如果我没有弄错的话会有一点差距.)

提前感谢您的意见.

Answer 1

我提出的解决方案本质上是上面选择 4 的修改版本。

我开发了一些逻辑，在页面加载时将onchange/onkeypress事件处理程序注册到由某个属性（在本例中）标识的节点。data-save-state="true"

要利用这一点，从主窗口启动的每个“子窗口”的开发人员的唯一要求是注册他们希望使用我的新 JavaScriptSaver模块保存数据的 URI。

所识别元素的值被序列化并作为 JSON 对象发送到Saver. 一旦在 1000 毫秒内没有检测到进一步的变化，它Saver负责将请求集排队并作为一组将它们发送到服务器。

对于我来说，这是更多的开销，因为我必须开发执行此操作的能力，但现在它已经存在，其他团队成员可以非常简单地集成到他们的代码中。

就丢失数据的可能性而言，现在唯一的风险是在保存请求发送到服务器之前的那一秒内。对我来说，这个解决方案本质上看起来非常像“Google Docs”。