iOS の Chrome で history.back() すると入力されていたフォームのデータが消える

history.back で戻ると フォームで入力中のデータが消える

クライアントからの依頼で、レスポンシブデザインの問い合わせサイトを作成した時のことです。

—–
問い合わせ入力ページから(submit送信)
↓
確認画面にすすみ(submit送信)
↓
メール送信後・サンクス画面に遷移して終了
—-
というよくある流れです。

問い合わせフォーム、データ入力画面にてデータを入力し、サブミットボタンをクリックし、PHP で処理して出力した確認画面へ行った時に、javascript の history.back() コマンドの ボタンを用意し、入力変更の際に、history.back() で前のデータ入力画面に戻り、入力内容の変更をさせようという考えだったのです。

ここで、iPod,iPhone の iOS の Chrome ブラウザだけが、history.back() で前のページに戻ると、入力されていたはずのデータが全て消えてしまいまました。

iOS の Safari ではちゃんと残っていますし、AndroidのChrome, PC のChromeブラウザでも正常にデータは残っているのですが、なぜか iOS の Chrome では入力フォームのデータが消去されてしまうという現象がみられました。

解決策として、同じ入力フォームの html 内に データ入力領域と、確認画面用の領域を作り、Ajaxを使って、フォームデータを送信し、データが処理されて戻ってくるところで、フォーム領域を hide し、確認画面を show させて、確認画面を表示しました。

確認画面から前の入力画面に戻るときは、Javascrip で確認画面をhide() し、入力画面をshow() することで、データ入力中の画面を再表示させました。