保持页面刷新时的表单数据 [英] Keep form data on page refresh

问题描述

我有一种情况，出于某种原因，网页可能会在用户填写表单时刷新。不需要的效果是消除了用户已经输入的数据。

有没有一种解决方案可以让页面刷新时保持表单数据？

表单包含文本输入和选择。

解决方案

您说 出于某种原因，网页可能会刷新，您是否意味着用户可能会刷新页面，或者是否有其他脚本刷新页面？如果是后者，您应该尝试修复导致刷新的问题，而不是尝试保留表单数据。如果是前者，JavaScript可能会成为您的解决方案。

您可以听任何表单元素上的每个关键事件。当触发键盘事件时，您将表单数据序列化并将其写入cookie（或者网络存储，取决于您需要支持的浏览器），以保留最新的数据。如果页面重新加载，或者用户离开页面并返回，则cookie可以在文档就绪的情况下反序列化，并且可以使用cookie中的数据重新填充表单。发布表单时，请确保也清除Cookie，以确保下次用户加载页面时表单未被填充。

更新

这是一个很好的博客文章，了解如何使用 GSerializer 进行序列化并使用JavaScript进行反序列化。

I have a situation where for some reason a Web page might refresh while a user is filling out a form. The unwanted effect is to wipe out the data already entered by the user.

Is there a solution to have the form data persist on page refresh?

The form includes text input and selects.

解决方案

You say "I have a situation where for some reason a Web page might refresh", do you mean that the user might refresh the page, or is it some other script that refreshes the page? If the case is the latter, you should probably try to fix the issue that causes the refresh instead of trying to preserve the form data. If it is the former, JavaScript will probably be the solution for you.

You could listen for every keyup-event on any of the form elements. When a keyup-event is fired you serialize the form data and write it to a cookie (or a webstorage, depending on what browsers you need to support), to preserve the most up-to-date data. If the page reloads, or if the user leave the page and comes back, the cookie can be deserialized on document-ready, and you can re-populate the form with the data from the cookie. When you post the form, you make sure to also clear the cookie, to make sure the form isn't filled the next time the user loads the page.

Update

Here is a good blog post about how to use GSerializer for serialization an deserialization with JavaScript.

这篇关于保持页面刷新时的表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！