[解決済み] 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 アップデートは保存されます)。

この矛盾はどこから来ているのでしょうか？

どのように解決するのですか？

ひとつの答えです。とりわけ unload イベントは back/forward キャッシュを無効化します。 .

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

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

jQuery は自動的にウィンドウに unload イベントをアタッチするので、残念ながら jQuery を使用すると、DOM 保存とクイック バック/フォワードのために bfcache に保存されるページから外れてしまいます。 . [更新: これは jQuery 1.4 で修正され、IE にのみ適用されるようになりました]。

• Firefox の bfcache に関する情報
• Safari のページキャッシュに関する情報 と アンロードイベントの動作に関する将来の変更の可能性
• Opera は高速な履歴ナビゲーションを使用します。
• Chrome はページキャッシュを持たない ( [1] , [2] )
• DOM操作とbfcacheで遊ぶためのページです。
  • このページは通常のキャッシュに保存されます。
  • このページはキャッシュされませんが、bfcachedされます。