不使用表格记住输入答案

【问题标题】：input remembered without using a form不使用表格记住输入
【发布时间】：2013-06-22 02:57:44
【问题描述】：

如果我使用表单并提交按钮，那么浏览器可以记住文本输入字段，但如果我只使用输入类型，没有表单并且按钮操作是 onclick 事件，那么浏览器不会缓存输入值用户。

有没有办法让浏览器在不使用实际提交的情况下仍然缓存“表单”输入？

下面是示例代码，显示了我的页面。当用户单击搜索时，会调用一个 javascript 函数来填充 div“结果”。一切正常，除了没有浏览器会缓存文本输入。

<h2>Device Cleaner</h2>
<p>Enter MAC Address of device to clean:</p>
<input type="text" id="entry" name="macaddr" onkeypress="keyChecker(event)">
<button type="button" id="start" onclick="query()">Search</button>
<div id="results"></div>
</body>
</html>

【问题讨论】：

标签： javascript html forms caching onclick

【解决方案1】：

无法强制浏览器保存此信息。只要您要保存的输入相对较短，您就可以使用 JavaScript 来存储带有此信息的 cookie。然后在将来查看页面时，您可以使用这些 cookie 来填充输入字段。不过要小心敏感信息。

或者，您可以通过 AJAX 请求将用户输入存储在您自己的服务器上。

【讨论】：

一个警告：安全建议是，一般来说，您不应将任何敏感信息（如密码或社会安全号码）保存在 localStorage/cookies/anything 中。这意味着对于这种类型的许多形式，密码字段是唯一不记得的字段。
因为我只有一个字段要缓存，所以我选择了这条路线。安全性不是很重要，因为在我的情况下，这是一个内部网页，无法在我的建筑物外访问。

【解决方案2】：

有没有办法让浏览器在不使用实际提交的情况下仍然缓存“表单”输入？

没有。

过去的做法是提交到一个空白页面，但现在不再适用于所有浏览器。

【讨论】：

【解决方案3】：

是否可以在javascript中使用异步请求更新“结果” div，从而使页面实际上不刷新/提交，而只是直接显示结果？

这将涉及拦截表单的提交操作，并在您的服务器上编写一个不同的端点来执行搜索，并且只是返回您的表单需要的数据。我在回答中描述得有点多，但人们通常会这样做以提高可用性；通过谷歌搜索“ajax 表单提交”，您会找到比我提供的更好的教程。

【讨论】：

我试过了，它在 Firefox 中运行良好，但在 chrome 或 IE 中不行。
没有什么特别的理由不应该在所有浏览器中工作。您可能想要打开一些 Javascript 调试工具来准确找出某个地方出了什么问题。（对于任一浏览器的最新版本，只需按 F12 即可打开调试器）
明确地说，发送表单数据，检索并显示答案。 BUT 只有 firefox 缓存表单数据。其他浏览器上没有 javascript 错误。
如果浏览器正在执行“页面更改”，就好像您输入了一个新 URL（完成了一个快速的白页视图），那么它并没有像我描述的那样设置。 AJAX 不会以任何方式清除表单值或更改页面的状态。即使像页面的滚动位置这样的东西也不会从 AJAX 提交中改变。示例：此评论框使用 AJAX，您注意到每次提交时页面都不会完全刷新。