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

Question

当用户在未先保存其工作的情况下关闭浏览器窗口时，将Web应用程序的数据与服务器同步的可接受方式是什么？我正在谈论要么打“X”，要么按F5或其他东西。

一点背景：

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

用例：

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

我考虑/尝试过的事情：

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

提前感谢您的意见。

Answer 1

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

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

为了利用这一点，对每个＆＃34;子窗口的开发者的唯一要求是＃34;从主窗口启动的是使用我的新javascript Saver模块注册他们希望将数据保存到的URI。

标识的元素的值被序列化并作为JSON对象发送到Saver。 Saver负责排队请求集，并在1000毫秒内未检测到进一步更改时将其作为一组发送到服务器。

对于那些必须发展这种能力的人来说，这是一个更大的开销，但现在它已经存在，其他团队成员很容易整合到他们的代码中。

就丢失数据的可能性而言，现在唯一的风险是在将保存请求发送到服务器之前的第二个时间内。这个解决方案看起来非常像Google Docs＆＃34;在性质上对我而言。

Answer 2

听起来我想要使用cookies。据我所知，几乎任何网络浏览器都支持它。

唯一不支持localStorage的是Opera Mini ..我猜这对你或你正在制作该程序的人来说有点太不支持了。

Here's a plugin for handling cookies，因为如果没有插件，它们确实不是你想要处理的东西。 ;）看起来它在任何浏览器上都受支持！

如果您不想使用库，请参阅Document.cookie上的Mozilla开发者网络页面。

如果您想了解Cookie的历史记录，可以查看this。