Web 应用程序如何可靠地防止未保存的表单数据丢失？

防止未保存的表单退出

许多 Web 应用程序都具有允许用户输入和编辑数据的表单。当用户离开这些表单或关闭浏览器选项卡时，防止意外数据丢失是一项重要的安全措施。本文通过对各种方法的详细分析，探讨了此问题的全面解决方案。

短暂且有缺陷的解决方案

尝试处理 beforeunload 事件并返回非空字符串似乎可以解决该问题。但是，当用户提交表单时，此方法会失败，这也会触发卸载事件。为了缓解这种情况，可以引入一个标志来指示正在提交表单。然而，这个解决方案仍然存在问题，因为它没有考虑对表单所做的实际更改。

理想的解决方案：利用“脏”标志

更全面的解决方案方法涉及使用“脏”标志，该标志仅在发生重大表单更改时触发警报。此方法将 beforeunload 事件与 isDirty 函数结合起来，该函数检测是否有任何相关的表单值被更改。

确定“脏”状态

实现 isDirty 函数涉及几个注意事项：

• jQuery：使用 jQuery 的表单序列化可能会有限制，因为它仅适用于命名的非禁用元素。
• 事件：按键事件是有限的，可能无法捕获所有更改。
• 更改事件在检测 JavaScript 引发的方面也有限制更改。

避免事件处理陷阱

• 按键事件：不要覆盖复选框、单选按钮、鼠标触发的更改、不相关的击键或 JavaScript 修改的值。
• 更改事件：也错过了 JavaScript 修改
• 输入事件：缺乏浏览器兼容性，无法捕获所有类型的更改。

简化第三方库

与其重新发明轮子，不如考虑使用现有的库：

• jquery.dirty：检测表单更改并提供简单的配置选项。
• jQuery 的 Are You Sure？插件：提供了更可定制的方法，但可能有限

浏览器限制：

Firefox 4 不再支持卸载确认对话框中的自定义消息。 Chrome 51 也删除了此功能。考虑使用更通用的消息。

以上是Web 应用程序如何可靠地防止未保存的表单数据丢失？的详细内容。更多信息请关注PHP中文网其他相关文章！