零弐壱蜂

[Firefox] リロードしてもチェックボックス等の値が維持されてしまう問題の対処法

1 min read

背景

Firefox でページのリロードをした際に、インプットに入力したテキストやチェックボックスの値などが維持された状態で表示されてしまう。(静的な HTML の場合)
もちろん、スーパーリロードをした際は初期化されて表示されます。

色々と解決方法があって、状況に応じて使い分けたり併用したりしてます。
ただ、これらの設定だけじゃ不十分な場合もあります。

サーバサイド

Cache-Control: no-store

PHP

header("Cache-Control: no-cache, no-store");

フロントエンド

JavaScript

var input = document.querySelector("input");
input.setAttribute("autocomplete", "off");

jQuery

$("input, select, textarea").attr("autocomplete", "off");

HTML

HTML の<head>内で指定する場合

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

<input>に直接指定する場合

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

<form autocomplete="off">～</form> のような感じでも使えるみたい。

Edit on GitHub