iPhoneのChromeで戻るボタンで戻った際にフォームデータがクリア（リセット）されてしまう問題の解決方法

HOME > iPhoneのChromeで戻るボタンで戻った際にフォームデータがクリアされてしまう問題

iPhoneのChromeで戻るボタンで戻った際にフォームデータがクリアされてしまう問題の解決方法

2015/08/05

どのブラウザでもクリアされてしまう場合について

FirefoxやChrome、IEなど主要なブラウザでは発生しないことを確認していますので、もしどのブラウザでもクリアされてしまう場合、そもそも入力ページ側に何らかの問題があると考えられます。そのためこのページの対処法はひとまず無視して下記の「考えられる原因」について確認してみて下さい。

考えられる原因1，
稀に必須チェックをJavascriptの特殊なライブラリなどを使って行うとデータがクリアされることがあります。（adobeのspryで確認済）
他のJSにて行うか、必須項目はPHP側でチェックを行うようにするとそのようなことは起きないかと思います。

考えられる原因2，
PHPのセッション機能などを使用している場合もクリアされることがあります。
その場合、session_start()の前に「session_cache_limiter('none');」を記述することで対処可能です。

2017/8/9 追記
最近試したところ、iPhoneのChromeでも入力データがリセットされる問題は起こらないことを確認しました。
当方の機種はiPhone7ですが、iOSの問題だったのか、またはブラウザ（Chrome）の問題であったのかは今となっては分かりません。いずれにしても現在は解消されているぽいです。
ところが、、、Microsoft Edgeの場合にラジオボタンとチェックボックスのみチェックが外れてしまう問題が確認されました。

そのため下記はiPhoneのChromeではなく、Microsoft Edge、または問題が出たその他のブラウザ用の記事となります。

追記
Microsoft Edgeの場合、入力ページの拡張子が.phpの場合、ブラウザの戻るボタンで入力ページに戻った場合にすべての項目がリセットされることを確認しています。
.htmlであれば問題ないと言いたいところですが、上記のラジオボタンとチェックボックスのチェックが外れる件は依然として発生しています。。。（Microsoftはほんとに・・・）

追記
Microsoft Edgeであってもクリアされなくなったことを確認しています。おそらくアップデートなどで改善されたものと思われます。これで現時点では主要なブラウザではクリアは発生しないと思われます。

まえがき　経緯と把握している症状について

※（注意）上記の通り、下記記事内のChromeはMicrosoft Edgeに読み替えてください。

お問い合わせフォームでは

フォーム入力ページ　→　確認画面　→　戻る（再びフォーム入力ページヘ）

とページ遷移した場合、本来各入力欄には入力したデータが残っていることを期待しますし、当プログラムでも基本的にはそのようになっています。

ところがiPhoneのChromeにてデータがリセットされてしまうという報告があり、こちらでも実機で確認したところ確かに入力内容がクリア（リセット）されることを確認しました。（iPhoneのChromeのみでSafariは問題ありませんでした）

iPhoneであえてChromeを使っているユーザーが実際にどの程度いるのかという問題もありますが、
対象ブラウザに含める場合には対策が必要になります。

まず現在当サイトで配布しているメールフォームプログラムでは、戻るボタンにはJavascriptのhistory.backを使用しています。現在一般的なブラウザであれば、このhistory.backで戻ったとしても入力データは維持されますが、
このあたりはどうしてもブラウザ側の仕様に依存するため、そのようなブラウザが存在する可能性はあります。
※これは主に10年以上前の古いブラウザに見られた症状です。

そのような仕様のブラウザはもう出てこないだろうと思っていましたが、
それが今回のiPhoneのChromeだったということになります。
※現状把握しているのはiPhoneのChromeのみです。PC版のChrome、Android版のChromeは問題ありません。

それにしてもなぜあえてそういう仕様にしたのか・・・またはなってしまったのか・・・。iPhoneだけなのでバグ？の可能性もありますので今後のバージョンアップで解消される可能性もあります。またはこれがスタンダードになる可能性も無くはないですね・・・。（そうすることのメリットは無いと思うので絶対に避けて欲しいですが。なんせ対策がものすごく面倒なので）

ネット上にはPHPのheaderで「Cache-Control」や「Expires」、「Pragma」などを指定する方法やmetaタグで対応する方法などが紹介されていることがありますが、経験上これらはまったく意味がありません。念のため今回も試しましたが効果ありませんでした。結局はPHPのPOSTやSESSION、COOKIEを使用する以外に選択肢は無いと思います。もしあったらこっそり教えて下さいｗ

対策方法について

対策についてですが、まず少々面倒な実装が必要になります。PHPのセッション機能を利用して、ページを戻った際にはセッションに保存したデータを利用して入力欄にそれぞれデータを反映させることになります。（まぁCOOKIEでもいいのですが）
要するにiPhoneのChromeのためだけにかなり面倒な作業が発生するということです・・・。ダウンロードいただくファイルを確認いただければその面倒さ（+難しさ）が分かると思います。

これを行う場合、以下の様なデメリットがあります。

ガラケーは現実非対応（セッションが使えないため）
※そのためガラケーも対象としている場合、今度は逆にガラケーではリセットされてしまいます。
※ガラケーは別サイトとして設置し、プログラムも別に設置しているのであれば問題ありません。
フォームのページの拡張子も.phpである必要がある
※たとえば、contact.html→contact.phpとする必要があります。
selectやradio、checkboxなどのデータ維持は少々複雑な処理が必要になる。
※ダウンロードしたファイルを確認いただければわかると思います。
PHPのセッション（SESSION）機能が使えることが大前提です。
※設置サーバーをご確認下さい（一般的なレンタルサーバーであればほぼ問題ありません）
フォーム項目を変更、追加するたびに作業が発生する（気軽に変更しづらくなる）

こういったデメリットがあるため、今後も配布版への反映は考えておりません。

対策については以下の修正版ファイルをダウンロードいただき、そちらを参考にご自身で行なって頂く必要がございます。（そのファイルはすでに修正済となりますので、そのまま使っていただいても構いません）

どちらかというと上級者向けとなりますので予めご了承下さい。
※PHPの知識はほとんど不要ですが、HTMLのコーディング経験は必須だと思います。
特に「selectやradio、checkboxなどのデータ維持」の設定が若干難しいかもしれません。
（ダウンロードファイルをご参考下さい）

これに関するサポートは行なっておりませんのでご了承下さい。ご自身での修正が難しい場合はすべて有償での作業依頼として承りますのでご了承下さい。

対策済ファイルのダウンロード

フリー版をベースにしていますので、機能やファイル構成などはフリー版とまったく同じです。
このファイルを参考に既存のフォームに対して修正を行うことを想定していますが、そのまま使用してもかまいません。フリー版と同じく2ファイルのみです。フォーム側、及びmail.phpのいずれも修正が必要になります。
そのまま使用する場合でも項目の変更などは必要だと思います。

以下よりダウンロードいただき、コメントや既存の記述を参考に設定下さい。

データリセット対策版メールフォーム　

こちらはUTF-8のファイルですが、既存のファイルへのコピペで使う場合でその他の文字コードであってもなんら問題ありません。