在页面刷新时保留表单数据

Question

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

是否有解决方案让表单数据在页面刷新时保持不变？

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

Answer 1

你说"I have a situation where for some reason a Web page might refresh"，你是说用户可能刷新页面，还是刷新页面的其他脚本？如果案例是后者，您可能应该尝试修复导致刷新的问题，而不是尝试保留表单数据。如果是前者，JavaScript可能就是您的解决方案。

您可以在任何表单元素上侦听每个keyup-event。触发keyup-event时，您将序列化表单数据并将其写入cookie（或webstorage，具体取决于您需要支持的浏览器），以保留最新的数据。如果页面重新加载，或者用户离开页面并返回，则可以在文档就绪时对cookie进行反序列化，并且可以使用cookie中的数据重新填充表单。发布表单时，请务必清除cookie，以确保下次用户加载页面时表单未填写。

<强>更新

以下是关于如何使用blog post进行序列化以及使用JavaScript进行反序列化的好GSerializer。

Answer 2

建议的方法

1. 当用户填写表单时，运行JavaScript会通过AJAX将输入的值缓存在LocalStorage，cookie或会话变量中。

2. 在页面加载时，检查是否存在这些条目，并使用JavaScript填充表单。

3. 在表单提交时，清除条目。

Answer 3

使用HTML5网络存储 - 它比Cookie更快，更安全。您可以访问W3Schools网站，获取一些快速和基本的样本：http://www.w3schools.com/html5/html5_webstorage.asp