Ajax、戻るボタン、DOMの更新

JavaScriptがページAのDOMを変更する場合、ユーザーはページBに移動し、次に戻るボタンを押してページAに戻ります。ページAのDOMへの変更はすべて失われ、ユーザーは最初にサーバーから取得されたバージョンが表示されます。

それは、stackoverflow、reddit、および他の多くの人気のあるWebサイトでそのように機能します。（この質問にテストコメントを追加してから、別のページに移動し、戻るボタンを押して戻ってください-コメントは「消えてしまいます」）

これは理にかなっていますが、一部のWebサイト（apple.com、basecamphq.comなど）は、どういうわけかブラウザにページの最新の状態を提供することを強制しています。（http://www.apple.com/ca/search/?q=ipodにアクセスし、上部にある[ダウンロード]リンクをクリックしてから[戻る]ボタンをクリック-すべてのDOM更新が保持されます）

矛盾はどこから来ていますか？

1つの答え：とりわけ、アンロードイベントにより、バック/フォワードキャッシュが無効化されます。

一部のブラウザーは、いわゆる「bfcache」または「ページキャッシュ」にWebページ全体の現在の状態を保存します。これにより、[戻る]ボタンと[進む]ボタンを使用して移動するときに、ページを非常にすばやく再レンダリングし、DOMとすべてのJavaScript変数の状態を保持できます。ただし、ページにonunloadイベントが含まれている場合、それらのイベントによってページが機能しない状態になる可能性があるため、ページはbfcacheに保存されず、再ロードする必要があります（ただし、標準キャッシュからロードすることができます）。すべてのonloadハンドラーの実行を含め、最初からレンダリングされます。bfcacheを介してページに戻ると、DOMは以前の状態に保たれ、onloadハンドラーを起動する必要はありません（ページが既に読み込まれているため）。

bfcacheの動作は、Cache-Controlおよびその他のHTTPヘッダーに関して、標準のブラウザーキャッシュとは異なることに注意してください。多くの場合、ブラウザは標準のキャッシュにページを保存しない場合でも、ページをbfcacheにキャッシュします。

jQueryは自動的にアンロードイベントをウィンドウにアタッチするため、残念ながらjQueryを使用すると、DOMの保持と迅速なバック/フォワードのためにページがbfcacheに保存されなくなります。。[更新：これはjQuery 1.4で修正されたため、IEにのみ適用されます]

• Firefox bfcacheに関する情報
• Safariのページキャッシュの情報とどのようにアンロードイベントの仕事に将来の変更
• Operaは高速履歴ナビゲーションを使用しています
• Chromeにはページキャッシュがありません（[1]、[2]）
• DOM操作とbfcacheで遊ぶためのページ：
  • このページは通常のキャッシュに保存されます
  • このページは表示されませんが、bfcachedのままになります

私はChromeがSafariのように動作するようにしてきましたが、機能する唯一の方法Cache-control: no-storeはヘッダーを設定することです。これにより、ユーザーが[戻る]ボタンを押すと、ブラウザはサーバーからページを再フェッチします。理想的ではありませんが、古いページが表示されるよりはましです。

Facebookは、ajaxリクエストのURLのハッシュ識別子を変更することでページの状態を記憶します。これらの変更はブラウザの履歴に記録されるため、ユーザーが[戻る]ボタンをクリックすると、ハッシュは以前のものに変わります。そのため、has識別子を監視し、ブラウザによって変更されたときに反応するJavaScriptが必要になることを暗示しています。 Andreas Blixtには、ハッシュ監視スクリプトがあります。

これはハッシュ（＃）記号とは関係ありません。

AppleのHTTPヘッダーを確認する場合は、単にページをキャッシュしています。

URLハッシュ/フラグメント識別子の使用は、AjaxとDOMの更新に依存するWebアプリケーションで状態をフック/記憶するためのかなり一般的な方法です。

Really Simple Historyプロジェクトでいくつかのアイデアを確認してください。ハッシュの変更についてURLを監視することが可能で、rshはブラウザーの違いを考慮してこれを行います。

Railsこれで問題が発生している人にとっては-あなたの問題はbfcacheではありません（私はそうだったと思いました）-それはturbolinks宝石です。ここに、それを削除する方法です。

うまくいけば、これにより時間を節約し、壁に頭をぶつけてしまうことができます。

探しているのは、ある種のURLハッシュ管理です。URLの＃はクライアント側のみを対象としています。

JSで背中の状態を変更すると、URLの＃のデータが更新されます。

また、ハッシュが変更されたかどうかを監視し、ハッシュの新しいデータに基づいてページの状態をロードするポーリングのタイプを追加します。

これをみて：

http://ajaxpatterns.org/Unique_URLs