HTML5のsessionStorage、文字列に型変換されるから注意。

HTML5の新しい変数sessionStorageを使ってみました。
僕の勘だとこいつは以下のようなユースケースに最適。

「詳細設定」ボタンなんかを作りました。
これを押すと詳細設定のブロックが表示されます。
再度押すと非表示になります。
リロードすると、非表示になっちゃうけど、
それは避けたい。
いったん表示にしたら表示のままでいてほしい！

こんな感じ。
このときには以下のコードになります。

<p><span id="settingButton">詳細設定</span></p>
<div id="setting">
<dl>
<dt>設定1<dt>
<dd><input type="text" name="setting1" /></dd>
</dl>
</div>

// jQueryしか書けない体になってしまった元mootools使い@shinoutです。
$(function(){
  sessionStorage["setting"] = sessionStorage["setting"] || false; // 最初は非表示
  
  // 現在のsessionStorage["setting"]を表示に反映させる
  $("#setting")[ sessionStorage["setting"] ? "show" : "hide"]();

  // クリックで toggle
  $("#settingButton").click(function(){
    sessionStorage["setting"] = ! sessionStorage["setting"];
    $("#setting")[ sessionStorage["setting"] ? "slideUp" : "slideDown"]();
  });
});

ロジックとして何をやってるかというと、
sessionStorage["setting"]の値に合わせて、表示、非表示をさせているという話。
読み込み時に参照し、
クリック時に設定&参照することによって表示と連動させられます！

一見よさそうに見えるコードですがこれ、正常に動作しません。

実は、[Storageのデータはすべて文字列で入る]ということを考えてませんでした。

だから、sessionStorage["setting"]は,"false"という名の文字列になってしまっています。

で、いろいろ試してみたんですが、

Boolean("false"); // 型のキャスト！これ boolean (true) ですから。残念。

だから結局、
sessionStorage["setting"]に何らかのフラグ文字を入れるという解決になりました。

$(function(){
  sessionStorage["setting"] = sessionStorage["setting"] || "HIDE"; // 最初は非表示
  
  // 現在のsessionStorage["setting"]を表示に反映させる
  $("#setting")[ sessionStorage["setting"]=="SHOW" ? "show" : "hide" ]();

  // クリックで toggle
  $("#settingButton").click(function(){
    sessionStorage["setting"] = sessionStorage["setting"] == "SHOW" ? "HIDE" : "SHOW";
    $("#setting")[ sessionStorage["setting"]=="SHOW" ? "slideUp" : "slideDown"]();
  });
});

こんなかんじで。

なおlocalStorageも同様に文字列として保存しますので注意。