バックボタンでHTMLを動的に変更したままにする

Question

これは驚くべきことですが、私はこれが他のサイトでは動作していますが、

私はhistory.jsとHistory APIについて知っていますが、URLを変更したくないだけでなく、ブラウザが新しいHTMLコンテンツをキャッシュするようにして、ユーザーがページを離れるときに戻るボタンを使用して戻ってきても、更新されたHTMLはまだ残っています。

URLの変更やハッシュ番号の使用がない他のサイトでは、これが常に動作しています。
これを動作させるための秘訣はありますか、ブラウザによってランダムに決定されていますか？
この情報を得るためにURLを使用したくない場合は、簡単な方法がありますか？

Answer 1

約10年半前から、私は一度痛い試行錯誤で発見した2つのトリックを使用しています。入力フィールド値、特に「隠れた」値はURLと共にブラウザの履歴に保存されます - back（またはforward）ボタンでページに戻るときにonLoadイベントが呼び出されます。

これは、非表示フィールド（フォームに入力することを忘れないでください）に、あなたが好きなだけの「状態」を保存してから、「onLoad」で変更を「やり直す」ことを意味します。私は通常、 'レンダリング'パートを別の関数にします。つまり、動的性が発生しているときは、まず隠れたフィールドに書き込んだ後、レンダリング関数を呼び出します。次に、さまざまなダイナミクスのレンダリング関数をまとめて、onLoadから呼び出します。

私はマニュアルの中でこれまで狩りをしたことがないので、何らかの保証をすることはできませんが、私は信頼できるように（Netscape以来）信頼性の高い方法で使用しています。 （すべてのIE、クロム、FF - しかし他のものについては、私は試みたことがない）それについて聞いてください。しかし、これはトリックを行うように見えます。

Answer 2

私は、他のWebページがセッションを提供するいくつかのバックエンドサーバーを使用しているという理由が考えられます。

静的なhtml/jsページを作成している場合は、このようなセッションやページはリロードされません。

クッキーを使用して必要なものを達成することができます。

Answer 3

あなたはこのようなHistory.jsを使用して、あなたの目標を達成することができます

function manageHistory(data){ 

    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.replaceState({myData: data}, null); 
} 

$('select.select').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer 

    e.preventDefault(); 

    // get data from your select tag 

    manageHistory(data) 


}); 

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 

    // Launch the ajax call and update DOM using State.data.myData 
}); 

Mozillaのサイトにある歴史に関する文書をよると、PushState 3番目のパラメータは次のとおりです。

URL — ....... This parameter is optional; if it isn't specified, it's set to the document's current URL.

Answer 4

ここRESの著者、見つかりましたあなたの質問は/ r/javascript

Firefoxは最近、独自にこれを行う機能を追加しましたが、ブラウザが実行しないときにこれを行う「良い」方法はありませんそれはあなたのためです。

RESは、＃page = nマーカーを追加するだけです.nはあなたのページ番号です。そういう意味で、pageloadでは、RESはあなたがbackボタンから来ていなければならないことを知っています。もし既に見つかった場所が見つかったら、残念ながら、この特定の動作はCtrl + Fでborkedされます。ハッシュチェンジはユーザーを迷惑にしている検索ダイアログを閉じてしまうため、別のページ（ページ= n + 1）になる可能性があります。

だから、RESはあなたが背中を通ってページに到着したかどうかを推測するために、醜い不完全な体操ボタン。新しいページを読み込むたびに、その番号がsessionStorageに保存されます（localStorageと同じですが、タブにローカルです）。戻るボタンで表示されると、そのページ番号の要求が発生します。

最近、私はFFとChromeでテストしましたが、ハッシュ変更はもはやctrl-f検索ダイアログを「キャンセル」していないようですので、私の提案はそれを使用することでしょう。ページロード時にハッシュが存在する場合、そのハッシュによって決定された関連データをロードします。

実際に夢中になりたい場合は、実際のHTMLコンテンツをlocalStorageに保存し、バックボタンを使ってpageloadにリロードすることもできます。これは最も効率的なやり方ではないかもしれませんが、DOMに依存するjavascriptとの衝突を引き起こす可能性はほとんどありますので注意してください。

"ベスト"ソリューションは、実際にサイトが行っていること/そのコンテンツがどのように見えるか/動作しているかによって大きく異なります。

Answer 5

クッキーを使用することをお勧めします。

HTML5はWebstorageを提供しますが、値はブラウザに保存できます。 HTML5 Webstorageを扱ういくつかのJSライブラリもあります。

注：各ブラウザに保存できるデータのサイズには違いがあります。あなたはそれについての詳細を見つけることができますhere。 。

注2：あなたはwebstorageの使用に関するポリシーが更新されることを期待することができるようにいくつかの問題は、ユーザーのディスク容量をハッキングでもあった（http://feross.org/fill-disk/）

Answer 6

ローカルストレージが一つの方法である、別の方法は、サーバー側の永続性であります。

クライアントサイドでHTMLを編集/作成/一部のプロパティを変更した場合、ページの状態変更をwebstorageまたはデータベースと同期する必要があります（安価なAPIを使用）。

ページに戻ると、ページはローカルストレージから保存された情報を取得できます...サーバー側の永続性を使用している場合は、セッションCookieと組み合わせて使用​​する必要があります状態の変更 - サーバーからロードすることができます。