「戻る」ボタンをクリックしても AJAX ページの状態を (リロードせずに) 維持することは可能ですか?

Question

私は、さまざまな状況で AJAX アプリケーションで戻るボタンを機能させるためのいくつかのアプローチに精通していますが、私の特定のシナリオで適切に機能するソリューションは見つかりませんでした。

私が扱っているページは、サイトの検索インターフェイスです。通常の検索ボックスに用語を入力し、「go」をクリックすると、検索結果ページが表示されます。検索結果ページには、検索結果をフィルタリング/並べ替えて探しているものを見つけるための UI コントロールが大量にあります。これらのコントロールによってトリガーされる一部の操作は、完了するまでに (比較的) 長い時間がかかる場合があります (例:数秒）。

ユーザーが最初に結果をフィルタリング/並べ替えている場合、この遅延は問題ありません。素晴らしい AJAX スピナーなどがあります...ただし、ユーザーが検索結果をクリックしてから [戻る] ボタンをクリックしたときに、ページがクリックスルーしたときの状態に即座に復元されるようにしたいと考えています。

ページ履歴の辞書として IFRAME/フラグメント識別子を使用して状態を復元できますが、最終的に何が起こるかというと、ユーザーが最初に戻るボタンを押すと最初のページが読み込まれ、その後、AJAX クエリが (再) 実行されて、ページの状態が戻ると、AJAX スピナーがトリガーされ、さらに数秒待機する可能性があります。

ユーザーが「BACK」ボタンでページに戻ったときに、この種の 2 段階のページ読み込みを必要としないアプローチはありますか?

編集して以下を追加しました:私は jquery に興味がありますが、他のライブラリ/ツールキットに依存するソリューション、またはスタンドアロン/生の JavaScript のソリューションに満足します。

編集して以下を追加しました:Cookie/セッションを回避しようとしていると付け加えるべきでした。これにより、ユーザーが複数のブラウザ ウィンドウ/タブを開いて、同時に異なる検索結果セットを操作することができなくなります。

編集：マット、提案されたソリューション (フラグメント識別子を介してページ変更イベントをトリガーする) について詳しく説明してもらえますか?これが、同じページ内で [戻る] ボタンをクリックしても、特定の結果をクリックした後に検索結果ページに戻らない場合にどのように役立つかわかります。

Answer 1

使ってみてください ローカルストレージ 物体。ここにクロスブラウザライブラリがあります jストレージ そして WEBSHIMS json-storage

Answer 2

ただ使用してください クッキー.

Answer 3

調べましたか？ YUI ブラウザ履歴マネージャー?

Answer 4

「URL の末尾の # に情報を追加する」方法を使用してページ変更イベントをトリガーすると役に立ちますか。

そうすれば、「戻る」ボタンをクリックしても実際にはページが変更されることはなく、最初のページを読み込まなくても状態を復元できるはずです。

Answer 5

ユーザーのプロファイルに関連付けられた永続的なものを使用します。

Cookie とセッションは良いアイデアですが、これらのものをデータベースに保持することもできます。これにより、さまざまなブラウジング セッションにわたってユーザーのフィルタリング設定を保存できるという追加の利点が得られます (たとえば、オフィスで何かを探していて、家に戻っても検索を続けることにした場合)。

それはすべて、フィルターの複雑さと天気によって異なりますが、ユーザーが異なるブラウジング セッション間で使用したいと考えるかどうかによって異なります。

Answer 6

編集して以下を追加しました:複数のブロワーの窓/タブを開いている人が同時に異なる検索結果を操作するのを防ぐため、クッキー/セッションを避けようとしていると付け加えるべきです。

ランダムなトークンを作成し、それをフラグメント識別子に割り当てることができます。

• フラグメント識別子が設定されていない場合は、最初のページの読み込み時にトークンを作成します
• 終了する前に、すべての一時的な Ajax データをそのトークンをインデックスとして使用して Cookie に保存します。
• 打ち返すときに、フラグメント識別子が設定されている場合は、Cookie 内の対応するトークンからデータをロードします。
• トークンを期限切れにする「時刻」フィールドを追加することもできます。

サンプル Cookie (JSON):

{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}