在 Chrome 中重新加载页面时如何防止表单输入的重置？答案

【问题标题】：How to prevent the reset of form inputs when reloading a page in Chrome?在 Chrome 中重新加载页面时如何防止表单输入的重置？
【发布时间】：2017-10-12 06:02:08
【问题描述】：

我正在构建一个 Web 应用程序，它可能（偶尔）重新加载页面，以便使用表达式语言更新页面上显示的一些信息。在 Firefox 中一切正常，但在 Chrome 中，每次重新加载页面时，输入字段中的所有内容都会丢失，并且表单会重置为空白。这对用户来说太烦人了，他们必须再次输入所有丢失的内容。有什么方法可以在 Chrome 中复制与使用纯 HTML 的 Firefox 相同的行为，还是有必要使用一些 Javascript？提前致谢。

【问题讨论】：

输入字段是否位于<form> 标签内？
是的。我正在使用 Spring Form Tags，如果这可以产生任何影响（但我想它不会）。
不用重新加载页面，而是提交表单，这样就可以将提交的值写入
您的意思是使用 JS 将表单提交给不同的控制器（不是通常处理表单提交的控制器），它只会吐回更新的表单页面视图？听起来不错。非常感谢！我一定会试一试的。

标签： javascript jquery html css google-chrome

【解决方案1】：

假设这是您的代码：

<form id="formId" action="" method="post">
    <input type="hidden" id="hiddenAction" name="hiddenAction" value="" />
    <input type="text" id="firstName" name="firstName" value="" />
</form>

如果您使用的是表单，只需使用JavaScript 提交表单，而不是刷新页面。

如果您可以看到我在表格的开头添加了hidden input。用于跟踪提交动作

$("#formId #hiddenAction").val("refreshed") ;
$("#formId").submit() ;

然后在页面开头的php 中输入以下内容：

<?php
    $firstName = "" ;
    if (isset($_POST["hiddenAction"]) && $_POST["hiddenAction"] == "refreshed") { //When the hidden action is set to "refreshed" then we know that this is coming from refreshing the page
        $firstName = isset($_POST["firstName"]) ? $_POST["firstName"] : "" ; //Of course you have to escape the string and strip it from any pure html tags
    }
?>

在您的<html> 代码中，将所有输入标签分别更改为其相关值以匹配以下内容：

<input type="text" id="firstName" name="firstName" value="<?php echo $firstName ?>" />

【讨论】：

由于我使用的是 Spring MVC 而不是 PHP，因此我不得不进行一些调整，但是您的回答解决了我的问题，所以我接受了。谢谢！

【解决方案2】：

你必须使用一些小的 Javascript ..

就像在 Cookie / 本地存储 / 等中保存数据...

【讨论】：