Javascript 用户关闭浏览器时处理未保存的表单数据

当浏览器关闭或用户更改页面时，我很难想出如何将用户数据自动保存到表单中。当你想打开一个对话框时，onBeforeUnload事件是可以的，但是现在保存更改已经太迟了（除非你只是在onBeforeUnload处理程序中阻塞浏览器，足够长的时间让它将请求传递给服务器……但我不想这样做）

我相信你们中的一些人必须处理未保存表单的问题。你是做什么的？你是否：

• 让用户丢失更改
• 使用模式窗口询问他们是否确定他们做了正确的事情
• 在单个字段更改时动态保存它们
• 或者，当数据即将无法挽回地丢失时，您是否有某种终极方法来自动保存数据

---

•使用模式窗口询问他们是否确定他们做了正确的事情

---

关闭窗口是取消的行为。由于用户从未主动提交表单，因此无法保证他们希望保存数据（可能不正确），而您保存数据可能会给用户带来问题。

•使用模式窗口询问他们是否确实做了正确的事情

---

关闭窗口是取消的行为。由于用户从未主动提交表单，因此无法保证他们希望保存数据（可能不正确），您保存数据可能会给用户带来问题。

在我使用过的任何浏览器中，onBeforeUnload都会为您提供一个模式窗口，要求用户确认是否要离开页面。您可以添加自己的文本，警告他们存在未保存的数据，以帮助他们做出决定。您不希望在没有用户请求的情况下显式保存，因为a）用户没有尝试保存，b）如果您需要抛出任何验证错误，则将为时已晚，因为页面已经处于导航过程中。

在我使用过的任何浏览器中，onBeforeUnload为您提供了一个模式窗口，要求用户确认是否要离开页面。您可以添加自己的文本，警告他们存在未保存的数据，以帮助他们做出决定。您不希望在没有用户请求的情况下显式保存，因为a）用户没有尝试保存，b）如果您需要抛出任何验证错误，那就太晚了，因为页面已经处于导航过程中。

我喜欢您的第三个选项：

• 在单个字段更改时动态保存它们

我不得不处理类似的情况，这就是我们正在做的。向我推销这一点的两个主要因素：

改进的用户体验-用户体验 将被一种 不会丢失更改。他们是 一旦验证后，“已提交”。 例如，他输入了一封有效的电子邮件 地址，并立即保存， 此外，还为他提供了某种帮助 每个字段的反馈是 已成功保存（绿色） 例如，勾选显示在旁边 现场）

再也没有“哦，废话”了我的浏览器崩溃了 我失去了我所有的信息

---

缺点：开发这样一个解决方案需要额外的工时，而且最终可能不会像一个更简单的解决方案那样令人满意。尽管如此，在我看来还是值得的。

我喜欢你的第三个选择：

• 在单个字段更改时动态保存它们

我不得不处理类似的情况，这就是我们正在做的。向我推销这一点的两个主要因素：

改进的用户体验-用户体验 将被一种 不会丢失更改。他们是 一旦验证后，“已提交”。 例如，他输入了一封有效的电子邮件 地址，并立即保存， 此外，还为他提供了某种帮助 每个字段的反馈是 已成功保存（绿色） 例如，勾选显示在旁边 现场）

再也没有“哦，废话”了我的浏览器崩溃了 我失去了我所有的信息

---

缺点：开发这样一个解决方案需要额外的工时，而且最终可能不会像一个更简单的解决方案那样令人满意。也就是说，在我看来这仍然是值得的。

开始在这里写一个答案或评论，然后导航到别处，这已经足够好了。当涉及到大部分时间都在编辑内容的Web应用程序时，确认每一个更改都可能是乏味的。使用autosave，如果您意识到自己犯了一个错误，并且希望自己没有做出改变，那么问题就会出现。但是，老实说，你的行为经常是对的还是错的？在一个webapp中，你总是可以为那些犹豫不决的人实现回滚/撤消，这会更有用（虽然对于开发人员来说更复杂）。你不需要确认每一个更改，只需确认每一组更改，因为更改通常是在数据组中进行的（即联系人字段、安全字段、网格中的数据行等）。通常情况下，这将在用户不知道的情况下完成，因为他们将调用一个操作（通过“继续”按钮前进到下一组字段，或通过“保存”按钮退出编辑模式等），该操作将导致服务器回发或javascript事件，此时您将保存数据。但这只是常规的web应用程序流程。填写表单后，“保存”按钮只是下一步操作的一种可能性，如果不进一步解释，点击“保存”按钮将引导用户到何处（它只表示数据将被保存），这一点并不明显。因此，除非页面上的所有链接都是提交按钮，否则需要两个步骤才能转到用户选择的下一页，而不是一个步骤。接受更改需要用户执行一个操作，并等待一个页面重新加载，而不是自动保存。开始在此处编写答案或注释，然后导航到其他位置，这样就可以了