0

ブラウザーの [戻る] ボタンが押されたときに、変更されたページ全体とメモリ内の javascript 変数を ajax で復元したいと考えています。を使用して手動でブラウザの履歴に追加されましたwindow.history.pushState()。次を使用してページを保存/復元しようとしています:

            function changeURL(){
               window.history.pushState(document.body.innerHTML,"","...");
            }

            window.onpopstate = function(e){
                if(e.state){
                    document.body.innerHTML = e.state;
                }
            };

これは機能しているように見えますが、ページがロードされた時点でメモリにあった JavaScript 変数が、後続の ajax リクエストによって変更されたため、もはや存在しないという問題がありますが、戻るボタンを押したときにそれらを復元するための準備はしていませんでした。これらすべての値を変数に復元するにはどうすればよいですか?

4

1 に答える 1

2
  1. 追跡するすべての変数を管理しやすい形式にシリアル化する関数を記述します（JSONをお勧めします）。
  2. シリアル化されたデータを受け入れて解析/逆シリアル化し、変数を復元できる2番目の関数を記述します（これは最初の関数の鏡像になります）。
  3. シリアル化された状態を保存するための適切な場所を見つけて、ページの読み込み全体で保持されるようにします。localStorage個人的に私は過去にこれにCookieを使用しましたが、他の任意のメカニズムを使用することもできます。
  4. ページにコードを追加して、状態が変化するたびに、または少なくともユーザーがページを離れる直前のある時点で、シリアル化された状態を保存/更新します。
  5. ページにコードを追加して、ページの読み込み時に保存/シリアル化された状態を確認し、存在する場合は読み込みます。

編集：また、全体をdocument.body.innerHTMLシリアル化された「状態」として扱わないことをお勧めします。HTMLコンテンツの変更に使用している変数を分離し、それを状態として使用できるはずです。次に、変数を再適用することで、対応するHTMLを再生成できます。

于 2012-07-05T04:40:48.433 に答える