ブラウザの「戻る」ボタン

フォームに記入しているときに、誤ってブラウザの戻るボタンを押してしまったらどうでしょうか?すべて入力しなおしになります。

では、どうしたらいいでしょうか?ページ遷移するときに以下のコマンドでそれを補足することができます。

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

たとえば、アラートで(クッキーに一時保存しますか?)のようなダイアログを出して次回からはそれから読み込むようにするといった使い方ができます。

しかし、ajaxで動的にページを書き換えていたり、する場合もう少し動作はややこしくなります。「戻る」ボタンを押してしまうとページそのものが初期化されてしまうからです。

ブラウザの「戻る」ボタンのハッキング

そこで、dojoのdojo.backというAPIを用いてブラウザの「戻る」ボタンを(正確には「進む」ボタンも)ハッキングしてしまうという方法があります。

http://download.dojotoolkit.org/current-stable/dojo-release-1.2.0/dojo/tests/back.html

ここの例では、左側のボタンをクリックすると右側のdata outputにそれが反映されていくというサンプルです。ボタンを押した順にブラウザの「進む」と「戻る」ボタンを押すとそれが左側に反映されることを確認ください。

実際のサンプルとして、楽天トラベルのAPIを用いて非同期検索するときに、dojo.backを用いて戻るをクリックしたときに、前の検索結果を表示するというものです。

http://plaza.rakuten.co.jp/gontata/diary/20080508/

サンプルコード

ページのヘッダーに以下を追加

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

bodyタグの最後に以下を追加

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

「進む」ボタンと「戻る」ボタンを押したときに、状態の保存したいフォームの定義の処理

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

フォームが変更されたときにdojo.backに状態を保存する

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

あとは、

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

のような形で、フォームの内容に変更があったときにsaveBack()が呼び出されるようにし、dojo.backに状態を保存します。