HTML5 でメニューの開閉状態を保存する

| No Comments | No TrackBacks

Webアプリでトグル式になったメニューを作ることがありますよね。

ボタンを押したら開いて、再度押したら閉じてっていうやつです。

その開閉状態をブラウザを閉じても保持しようとすると、今までは非同期でサーバ側に状態を保存するか、Cookieを使うしかありませんでした。

HTML5だと、この辺も楽ちんですね。sessionStorageとか、localStorageを使えば、Cookie以上にお手軽に key, value のペアをローカル側に保存できるので、サーバ側の実装不要で状態を保存することができます。

試しにサンプルコードを載せておきます。

ちなみに、jQueryと、jQuery.jsonを使用していますのでご注意ください。

上述した通り、保存可能なデータは、key, value ですが、value は String である必要があるため、オブジェクトを JSON 形式に変換して保存するのに使用しています。

 

(サンプルコード)Safari, Chromeのみ

click! を押すと、各contents部分の表示/非表示が切り替わります。

ブラウザを開きなおしても、表示状態は保持されます。

-------------------------------------------------------------------------

<html>
<script src="./jquery-1.4.2.min.js"></script>
<script src="./jquery.json-2.2.min.js"></script>
<script>
var customlocalStorage = {
 get: function(key) {
  return(localStorage.getItem(key));
 },
 add: function(key, value) {
  localStorage.setItem(key, value);
 },
 object: function(key) {
  var str = this.get(key);
  if (str) {
   return($.evalJSON(str));
  } else {
   return(undefined);
  }
 }
};

var autoElementOpener = {
 set: function(group, id) {
  var obj = $("#" + id);

  if (obj) {
   var db = customlocalStorage.object("autoElementOpener_" + group);

   if (!db) {
    db = {};
   }

   if (obj.css("display") === "none") {
    db[id] = false;
   } else {
    db[id] = true;
   }

   customlocalStorage.add("autoElementOpener_" + group, $.toJSON(db));
  }
 },

 refresh: function(group) {
  var db = customlocalStorage.object("autoElementOpener_" + group);

  if (db) {
   jQuery.each(db, function(key, val) {
    var obj = $("#" + key);
    if (obj) {
     if (obj.css("display") === "none") {
      if (val) {
       obj.css("display", "");
      }
     } else {
      if (!val) {
       obj.css("display", "none");
      }
     }
    }
   });
  }
 }
};

var toggleDisplay = function(id) {
 var obj = $("#" + id);

 if (obj) {
  if (obj.css("display") === "none") {
   obj.css("display", "");
  } else {
   obj.css("display", "none");
  }
 }
};

</script>
<body onLoad="autoElementOpener.refresh('test');">
<span onClick="toggleDisplay('test1');autoElementOpener.set('test', 'test1');" style="display:;">click!(test1)</span><br>
<span id="test1" onClick="toggleDisplay('test1');autoElementOpener.set('test', 'test1');">contents(test1)</span><br><br>
<span onClick="toggleDisplay('test2');autoElementOpener.set('test', 'test2');" style="display:;">click!(test2)</span><br>
<span id="test2" onClick="toggleDisplay('test2');autoElementOpener.set('test', 'test2');">contents(test2)</span><br>
</body>
</html>

広島ブログ

No TrackBacks

TrackBack URL: http://mt.himawari-dream.com/mt-tb.cgi/526

Leave a comment

About this Entry

This page contains a single entry by kado published on 2010年7月17日 11:12.

Apache Hadoop について調べてみる(継続中) was the previous entry in this blog.

広ブロのオフ会に参加してきた is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.