制作页面告诉浏览器不要缓存/保留输入值

Posted 2023-02-15

【中文标题】制作页面告诉浏览器不要缓存/保留输入值

【英文标题】：Make page to tell browser not to cache/preserve input values

【发布时间】：2011-02-11 13:25:56

【问题描述】：

大多数浏览器缓存表单输入值。因此，当用户刷新页面时，输入具有相同的值。

这是我的问题。当用户单击保存时，服务器会验证 POST 数据（例如检查的产品），如果无效，则将其发送回浏览器。但是，如上所述，即使服务器清除了某些值的选择，它们仍然可能因为浏览器缓存而被选中！

我的数据有不可见的（直到父项被选中）复选框，所以用户可能甚至不知道某些先前的值仍然被选中，直到再次单击 保存 并收到错误消息 - 即使用户认为不是。这很烦人。

这可以通过执行 Ctrl + F5 来解决，但这甚至不是解决方案。是否有一种自动/编程方式告诉浏览器不要在某些表单/页面上缓存表单输入数据？

【问题讨论】：

<form autocomplete="off"... 适合您吗？这个问题是在所有浏览器中出现的，还是只出现在某个浏览器中？

有没有办法参考下拉<select> 列表来回答这个问题。我有一个列表并定义了一个 selected 选项，但刷新页面会保留以前选择的选项。

我想实现相反的效果 - 在后退按钮上保留每个页面的输入值（单击后退两次 - 相应地获取输入）。有很多使用大量 JS 代码的例子，（恕我直言，它们并没有真正起作用）但是 - 有没有更简单的方法？我在表单和输入字段上都尝试了 autocomplete="on" - 不起作用。浏览器是 Chrome。

【参考方案1】：

您是否明确将值设置为空白？例如：

<input type="text" name="textfield" value="">

这应该会阻止浏览器将数据放在不应该的地方。或者，您可以将autocomplete 属性添加到表单标签：

<form autocomplete="off" ...></form>

【讨论】：

我谈论的是复选框，所以我不能将值设置为“”。而且，自动完成关闭是否意味着“当用户按下 F5 时”不存储表单输入值，而不仅仅是“用于下拉自动完成列表”？

根据developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion， autcompletion=off 影响“会话历史缓存”，至少在 Gecko 中是这样。我会测试它是否能满足我的需要。

@queen3：是的，复选框是个问题，因为没有办法明确地说“未选中”。如果您仍然遇到问题，您可以尝试checked="false"，它可能适用于某些浏览器。另一种选择是使用 javascript/jQuery 在页面加载时显式取消选中所有复选框。

@queen3，你的意思是“autocomplete=off”而不是“autocompletion=off”

所有的答案和建议都对我不起作用。使用 chrome 和开发 .net

【参考方案2】：

另一种方法是在 html 中的表单之后使用 JavaScript 重置表单：

<form id="myForm">
  <input type="text" value="" name="myTextInput" />
</form>

<script type="text/javascript">
  document.getElementById("myForm").reset();
</script>

【参考方案3】：

来自a Stack Overflow reference

如果浏览器已经保存了值，则它不适用于 value=""，因此您应该添加。

对于输入标签，您可以设置属性自动完成：

<input type="text" autocomplete="off" />

您也可以对表单使用自动完成功能。

【讨论】：

在 Chrome 中，autocomplete="off" 在单个表单元素上使用时似乎没有效果 - 即使 value 属性显式设置为空白，并且在发送 Cache-Control: Must-Revalidate 标头时，这也没有效果.我必须将autocomplete="off" 属性应用于<form> 元素本身来抑制Chrome 中的这种行为。

我在表单上做了 autocomplete="off" 但它对我不起作用

我需要更多信息 @KingsleySimon 喜欢浏览器，您的浏览器上可能有一些设置会阻止正确的行为

浏览器的行为好像变了：developer.mozilla.org/en-US/docs/Web/Security/…

并注意 html 的有效形式。例如，它不是另一个等内的表单

【参考方案4】：

清除缓存基本上有两种方式：

<form autocomplete="off"></form>

或

$('#Textfiledid').attr('autocomplete', 'off');

【参考方案5】：

这在较新的浏览器中对我有用：

autocomplete="new-password"