JSで要素の表示の切り替えをした時にリロードしても状態を維持する

下記のように、Javascriptを使って要素の表示を切り替えて、
非遷移のページを作成する場合があると思います。

Demo

2011-08-07 1st - jsdo.it - share JavaScript, HTML5 and CSS

これはCSSのプロパティDiplayをリンクをクリックした際に切り替えているだけですが、
ユーザにとっては画面の遷移が無いのでとても快適ですよね。

ただ、あくまでCSSを切り替えてDivを表示させているだけなので、
うっかり更新ボタンを押してしまったりすると、
初期の画面の状態に戻ってしまいます。
(上記の場合だと最初のリンクだけが表示されている状態)
これによって普段と違う動作に利用者が混乱してしまうことがあるかもしれません。

今回はこれを解決します。

解決法

クリックしたときにURLにハッシュが付加されるようにaのhrefを以下のように編集します。

<ahref="#manage">管理</a></p>
   

以下のようなコードをbodyの直前などに書いてあげます。

$(function(){
  var _url = document.URL; //現在のurlを取得
  if(_url.indexOf("#")){
    var hash = _url.split("#")[1];
    if(hash == "manage"){ //URLの末尾に#manageがついていた時の処理
      $("#manage_panel").css("display","block");
    }else if(hash == "help"){ //URLの末尾に#helpがついていた時の処理
      $("#help_panel").css("display","block");
    }
  }
});

行っていることとしては、ページをロードしたときに
現在のURLを取得して、#以降の文字列を取り出し、
その文字列によって要素の表示非表示をしています。

これによって更新ボタンを押してページをリロードしてしまっても、
画面の状態を維持することができます。