重新加载页面时,为什么复选框保持选中状态?


80

我正在重新加载具有以下代码的网页:

<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />

即使每次重新加载页面时发送给浏览器的HTML保持不变,但执行重新加载时,复选框始终采用已检查的值。换句话说,如果用户选中该复选框并重新加载,则该复选框仍处于选中状态。

这里有一些缓存吗?

编辑:我尝试了下面的Gordon Bell的解决方案,发现即使删除了value =“ 1”之后,这种情况仍在发生。我可能还会想念其他东西吗?

<label for="showimage">Show Image</label> 
<input id="showimage" name="showimage" type="checkbox" /> 

Answers:


38

是的,我相信它正在缓存。例如,我在Firefox上看到了这种行为(不是Safari,这是值得的:))。

您可以使用CTRL--重新加载页面并绕过缓存(在Firefox上)SHIFTR然后您会看到检查值不带有(正常情况下CTRL-R将从缓存中获取信息)

编辑:我能够禁用此服务器端在Firefox上,设置缓存控制标头:

Cache-Control: no-store

这似乎禁用了Firefox的“记住表单值”功能


是的,CTRL-SHIFT-R导致复选框被重置。有没有办法防止这种情况被缓存?
只读

我不这么认为(至少不是从服务器端)。firefox在缓存事物方面确实非常积极。在客户端这种情况下,我只能使其可靠地停止缓存
Owen

2
它从缓存中获取值,从而进行缓存。除非我误解了您要说的话。
Owen

1
Firefox积极的缓存是主要的PITA,在针对它进行开发时总是会吸引我。我之前没有尝试过Cache-Control标头,但是如果它可以工作stackoverflow证明我完全在这里花费的时间是合理的。
Cruachan

1
这些值不是来自Firefox的下载文件存储中的“缓存”。例如:如果您导航离开,然后使用相同的URL,则页面将被缓存,但不会被保存。通过破坏缓存,您可以强制进行硬重装,但这只是巧合,因为它也会禁用该功能。
bobince

163

添加autocomplete="off"到页面上的表单元素。不利之处在于,这不是有效的XHTML,但可以解决此问题,而无需使用任何复杂的JavaScript。


1
对我有用,而缓存控制标头不起作用。
Lajos Meszaros 2014年

7
从什么我,它在HTML5实际上是有效的。(在阅读有关该主题的更多信息之前,我曾评论过以前的评论。)因此,如果您使用的是HTML5,请在复选框中使用自动完成功能。
EF0

1
十多年后。这个答案让我头疼!
·范登伯格

32

用js设置autocomplete =“ off”效果也很好。

例如使用jQuery:

$(":checkbox").attr("autocomplete", "off");

谢谢,这对我很有帮助。:)
Lyubomyr Shaydariv

1
我发现,你需要的$("#formId").attr("autocomplete", "off")地方#formId是你的表单的id。
Dan Diplo

@DanDiplo在很多情况下,我们使用没有格式的复选框,因此不适用(“ #formId”)。attr(“ autocomplete”,“ off”)
Clain Dsilva 2014年

2
@ClainDsilva仅仅因为您可以在表格外使用复选框,并不意味着我说的任何话都是不合逻辑的。您可能会说它并不完全全面(尽管它适用于大多数情况),但说它不合逻辑是很奇怪的。
Dan Diplo 2014年

@DanDiplo,当我们可以单独在复选框上应用自动完成功能时,它可以正常工作,我同意您的解决方案可以工作,但它也适用于表单框中的所有元素。但是,这可能不是预期的行为。这个问题只限于复选框而不是整个表格。出于所有应有的尊重,我只想找到适合该问题的最佳解决方案。在这种情况下,对整个表单应用自动完成功能是不正确的。
Clain Dsilva

1

这是Firefox的一个不错的功能:如果您键入内容但重新加载页面,则文本将保留在文本区域中。同等选择的其他设置。

las,它不适用于SO(可能是由JS重置)和像IE这样的笨拙的浏览器...

这建议一个解决方案:如果您确实需要这样做,请使用JS重置表单。form.reset()可能会完成这项工作(类似于“重置输入”按钮)。


1
似乎有点怪癖,或喜欢用大炮射麻雀。
Lajos Meszaros 2014年

@MészárosLajos什么是hacky / overkill,为什么您会这样看?您看到更简单的东西了吗?
PhiLho 2014年

如果您只想部分重置表单怎么办?我个人只是想禁用复选框的输入缓存,而不是文本字段。我完全同意您的观点,这是firefox的一个很好的功能,但不适用于自定义的两个状态按钮,它们基本上是重新设计的复选框。另一件事是,为什么要使用JavaScript,而在这里您可以简单地使用html属性来防止此行为?是的,我知道,“ autocomplete = off”会使html代码无效,但该页面仍然有效。
Lajos Meszaros 2014年

3
“它具有Firefox的一个不错的功能”:如果单击搜索结果页面上的过滤复选框,然后重新加载它,则选中的过滤器对显示的数据集毫无意义。-我说这是前面提到的主要PITA。
Sharky

我永远都不会称它为一个不错的功能...是的,当您输入大量文本然后需要刷新页面时,它确实有帮助,但是如果您正在开发UI,则远非一个不错的功能特征。
userfuser 2015年

1

这是一个古老的问题,但对于Firefox仍然是一个活跃的问题。我尝试过的所有答复都没有解决该问题,但为我解决的只是以下内容:

    document.getElementById('formId').reset();

每次页面加载时,这只是将表单重置为默认选项。由于您失去了精细的控制,因此这不是理想的选择,但对我而言,这是唯一解决此问题的方法。



0

这可能是由于浏览器缓存所致-对于不经常更改的静态网站非常有用,对于动态Web应用程序则非常不利。
尝试在页面顶部使用这两个meta标签。第二个元标记用于旧的浏览器(IE5),这些浏览器无法识别“无缓存”元标记,尽管不同会产生相同的结果:每个请求都发送到服务器。

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1">

我们真的喜欢像IE5这样的旧浏览器吗?顺便说一下,用PHP发送标头似乎更好一些,因为您在<head>中使用了较少的元标记
Lajos Meszaros 2014年

2
他的回答是在2008年,@MészárosLajos的评论是在2014年。当时,是的,确实很重要。
Duniyadnd


0

解决这个问题的公众想法

制作表格并重置按钮

<form>
<checkbox>
<reset>
</form>

$(reset).trigger("click");//to clear the cache and input 
$(checkbox).trigger("click");//to mark checkbox
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.