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も同様に文字列として保存しますので注意。