動的HTMLとjqueryを使用した戻るボタン

Question

私は、ajax呼び出しを実行してページの下部に結果（動的HTML）を生成する検索ページを持っています。問題は、ユーザーが結果（別のサイト）に行き、その後に戻るボタンを押すと、元のページとクエリがそこにありますが、ダイナミックHTMLがなくなったときです。

jquery履歴プラグインを使用しています。これは、ユーザーがピザを検索する場合は、URLに「#pizza」を追加する必要があります。そして、私のページが読み込まれるたびに＃の後に来るものから状態を復元することができます。しかしこれには、ajax呼び出しを再作成し、再度検索を行い、再度動的HTMLを構築する必要があります。

ユーザーが「戻る」を押すと結果ページがすぐにそのまま残っているように構造化することは可能ですか？

Answer 1

一部のブラウザでは、ページの状態を保持していますが、一部のブラウザでは表示されません。ブラウザがメモリ使用量を最小限に抑えようとしない限り、時々そうなります。ボトムライン、あなたはそれに頼ることはできません。

したがって、アヤックス状態のmypage.html#content-hashスタイルURLを使用する場合は、空のレイアウトをロードする必要があります.JSはハッシュタグを処理して関連するページを再構築する必要があります。これは遅くなり、より多くのリクエストがかかるかもしれませんが、そのハッシュはサーバーに送られないので、JSは必要なコンテンツを確認する必要があります。

HTML5プッシュ状態APIを使用すると、ページのリロードを行わずにウィンドウの完全なURLを変更できます。この場合、サーバーはajaxとして設定されたのと同じ状態でページ全体を表示できます。 Githubのいくつかのリポジトリを参照すると、それらがどのようにこれを行うかを見ることができます。フォルダをクリックすると、アニメーションが適用され、URLが変更されます。 URLを介してサブフォルダに直接移動すると、そのサブフォルダの内容が既にレンダリングされています。

Answer 2

はい、検索結果に生成されたリンクでクリックハンドラを追加します。

次に、ハンドラ関数で文字列をクッキー変数に保存します。ユーザーがクリックしたページから戻った場合は、サーバー側で結果を検索できます。したがって、2回目の呼び出しなしで結果が表示されます。