javascript - 刷新页面后保留搜索值

Question

我有一个 HTML 页面，其中包含一个将值传递到外部 PHP 页面的表单。

<form method="post" action="getContent.php">
    <input type="hidden" name="fromTest" id="fromTest"/>
    <input type="hidden" name="untilTest" id="untilTest"/>
    <input type="hidden" name="latTest" id="latTest"/>
    <input type="hidden" name="longTest" id="longTest"/>
    <input type="hidden" name="search1" id="search1"/>
    <input type="hidden" name="search2" id="search2"/>
    <input type="submit" class="sendAll" value="Gather News!">
</form>

这方面的代码工作正常，值很棒。我的问题是保留此信息并在调用此 php 页面并将其返回到我的 html 文件后重新使用它。

我希望设置第一个搜索词“#search1”来替换 feed1mainheader 内的值。

  <div id="feed1MainHeader"></div>

我明白如何做到这一点，我已经通过这个网站使用过几次，但我的问题是刷新页面时失去值(value)？

   $('#feed1MainHeader').val($("#search2").val());

我读过一些有关 cookie 的内容，但我对此非常陌生，并且不太了解如何实现此类功能？

有什么想法吗？

Answer 1

浏览器本身不可能为您保存该值。但在这件事上您还可以使用一些其他技巧。

自动完成方法

在此方法中，您使用输入字段的自动完成属性。浏览器将跟踪该特定字段中的每个输入数据。

这是示例

<input type="text" autocomplete="on" name="somename" />

第一次它不会向您显示任何内容。第二次它将显示最后提交的值，然后它将显示通过此字段提交的值列表。

localStorage 方法

您可以将该值存储在 localStorage 中(仅限启用 HTML5 的浏览器)。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

您可以将该值存储在浏览器(客户端)设备中，然后使用 JavaScript 再次访问它。

缓存它

您可以使用缓存服务将用户向您提供的数据和值以缓存的形式存储在浏览器中。

JavaScript或服务器端语言可用于存储缓存文件。

这些是您可以实现的一些方法。自动完成方法是其中最简单的方法。但是您也可以使用其他方法。他们将保存您最后的输入并在您需要时为您提供。

祝你好运!