[戻る]ボタンのWebフォームコンテンツをどのように保持できますか

StackOverflow https://stackoverflow.com/questions/247573

質問

Webフォームが送信され、ユーザーを別のページに移動する場合、ユーザーがフォームを再度送信するために[戻る]ボタンをクリックすることがよくあります（私の場合、フォームは高度な検索です）。

[戻る]をクリックしたときにユーザーが選択したフォームオプションを確実に保持するにはどうすればよいですか（したがって、多くのフォーム要素の1つだけを変更している場合、フォームを埋めて最初からやり直す必要はありません）

セッションデータ（Cookieまたはサーバー側）にフォームオプションを格納するルートをたどる必要がありますか、それともブラウザにこれを処理させる方法はありますか？

（環境はPHP / JavaScriptです-サイトはIE6 +およびFirefox2 +で動作する必要があります）

役に立ちましたか？

解決

セッションに入れました。
これは最も信頼性が高くなり、たとえ「戻る」ようにまっすぐに行かなくても、引き続き検索オプションがあります。 Cookieに入れても機能しますが、非常に小さな形式でない限りお勧めしません。

他のヒント

あなたはブラウザに翻弄されていると思います。ヒットすると、ブラウザはコンテンツに対してサーバーに新しいリクエストを送信せず、キャッシュを使用します（とにかく私が見たほとんどすべてのブラウザで）。そのため、サーバー側には何もありません。

結果ページのonunloadイベント中に検索結果をCookieに保存し、検索ページのJavaScriptでCookieを読み込んでフォームに入力するなど、非常に複雑なことができるかどうか疑問に思っています-しかし、単なる推測であり、うまくいくかどうかはわかりません。

ブラウザ次第ですが、ほとんどの場合、何もする必要はありません。

IE、Firefoxなどは、前のページのフォームの内容を喜んで記憶し、[戻る]がクリックされたときに再度表示します...ページをキャッシュしないか、完全にスクリプトからフォームを構築します。

（セッションに何かを置くと、同じフォームで2つのタブが開いているブラウザが混乱する可能性があります。そのようなことを行うときは十分に注意してください。）

問題は、ブラウザがページのキャッシュバージョンを返し、おそらくサーバーに再度要求しないことです。つまり、セッションの使用は無関係です。

ただし、AJAXを使用して、以前に送信されたフォームの詳細をページの読み込みイベントに読み込むこともできます。

基本的には、POST後に何らかの方法で（おそらく提案されたセッション変数に）サーバーに保存する必要があります。また、フォームページでJavascriptを設定してロード時に実行し、AJAX呼び出しを発行してサーバーからデータ（JSON形式など）を取得し、フォームフィールドにデータを事前入力する必要があります。

jQueryコードの例：

$( document ).ready( function() {
  $.getJSON(
    "/getformdata.php",
    function( data ) {
      $.each( data.items, function(i,item) {
        $( '#' + item.eid ).val( item.val );
      } );
    });
} );

/getformdata.phpは次のようなデータを返す可能性があります：

{
  'items': [
    {
      'eid': 'formfield1',
      'val': 'John',
    },
    {
      'eid': 'formfield2',
      'val': 'Doe',
    }
  ]
}

セッションに対してまだ何も保存されていない場合、明らかに空の配列を返します。上記のコードは大雑把でテストされていませんが、基本的な考え方がわかるはずです。

補足：現在のバージョンのOperaおよびFirefoxは、戻るときにフォームフィールドの内容を保持します。 JSコードはこれを上書きしますが、安全なはずです。

別のajaxyオプション（javascriptを使用していないユーザーには適していません）は、javascriptを介してフォームを送信し、確認ページに移動します（または、ボタンをメッセージに置き換えてフォームにメッセージを表示します）。そうすれば、「戻る」ことはありません。可能です。

値を送信する前にCookieに保存しないのはなぜですか？タイムスタンプまたはトークンを含めて、いつ記入されたかを示すこともできます。次に、ページが読み込まれたら、Cookieからのデータをフィールドに入力するか、これが新しい検索なので空白のままにするかを決定できます。

javascriptを使用してローカルですべてを実行することもできます。そのため、Cookieを検索値とともに保存し、ページロード時にCookieが存在するかどうかを確認します。このようなもの：

$('#formSubmitButton').click( function() {
    var value = $('#searchbox').val();
    var days = 1;
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    document.cookie = "searchbox="+value+expires+"; path=/";
});

$(document).ready( function() {
    var nameEQ = "searchbox=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length);
   }
   $('#searchbox').val(valueC);
});

これをテストしていませんが、動作するはずです。これにはjQueryが必要です。

Cookie関数の由来： http://www.quirksmode.org/js/cookies。 html

FireFoxとIEの両方がデフォルトでこの動作をしていると言っておくべきです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top