localStorageを使ってユーザー設定を保存する
localStorageを使って設定フォントサイズを保存しよう
今回はlocalStorageを使ってユーザー設定を保存するプログラムを紹介します。
よくJavascriptベースでページ内の文字を変更するボタンがありますね。あれをlocalStorageを使って設定を保存し、ページをリロードしたり、閉じたりしても設定されたフォントサイズが呼び出されるようにします。
今回のスクリプトは前回のlocalStorageメモよりは簡単です。
サンプルスクリプト
まずはサンプルスクリプトから
<div id="Sizer">
<input type="button" value="小" id="small"/>
<input type="button" value="中" id="middle"/>
<input type="button" value="大" id="large"/>
</div>
<div id="text">文字文字</div>
$(document).ready(function(){
var hoge = localStorage.getItem("font_size");//strageに保存された設定呼び出し
$("head").html(hoge);//headにスタイル書き出し
});
$("#small").click(function(){
localStorage.setItem("font_size", "<style>.fontsize{font-size:0.5em;}</style>");
var hoge = localStorage.getItem("font_size");
$("head").html(hoge);//headにスタイル書き出し
});
$("#middle").click(function(){
localStorage.setItem("font_size", "<style>.fontsize{font-size:1em;}</style>");
var hoge = localStorage.getItem("font_size");//strageに保存された設定呼び出し
$("head").html(hoge);//headにスタイル書き出し
});
$("#large").click(function(){
localStorage.setItem("font_size", "<style>.fontsize{font-size:2em;}</style>");
var hoge = localStorage.getItem("font_size");//strageに保存された設定呼び出し
$("head").html(hoge);//headにスタイル書き出し
});
</script>
動作説明
DEMOのURLをブラウザより確認して下さい。ほとんどのブラウザは対応されていると思いますが、うまくいかない場合はChromeやOperaで試してください。
前回はメモでフォーム内のテキストを保存しましたが、今度はCSSのスタイルを保存しています。
大や小ボタンを押してからブラウザを閉じて、再び開くと前回の設定が保存されているのが確認出来ます。
ボタンのいずれかが押されたらfont_sizeというストレージ名で保存します。
localStorage.setItem("font_size", "<style>.fontsize{font-size:2em;}</style>");
失敗例
localStorageでの失敗例は、localStorageは文字列しか保存できないのに、DOM要素を入れた場合。
例えばこのように、フォントサイズの変更が入ったクラスを付与するパターン。マークアップエンジニアの方はHTML上にCSSが書いてあるのは我慢ならんので クリックされたらクラスを付与したいと思うはず。
localStorage.setItem("font_size", $("#text").addClass("middle"));
alert(localStorage.getItem("font_size"));
動作説明
どうでしょうか？ボタンを押された瞬間はフォントサイズが変わり、クラスが付与されたことは確認できましたが、ブラウザを閉じて、もう一度開くと、フォントサイズはデフォルトに戻っています。
アラートが出ていますが、このアラートはlocalStorageに何が入っているのかを確認したもので、結果はobject Objectとなり、確認することが出来ません。
localStorageのまとめ
結局文字列ベースで保存するのが一番です。マークアップの方からすると若干気持ちが悪いですが。
補足
localStorageは、ローカル環境だと完全に動かないケースもあります。サーバーにアップすると問題なく動き、ローカルだと今回のサンプルは動きませんでした。
IEに関しては、localStorage対応でも、インターネットオプションにlocalStorageを使う旨設定しておかないと、これも動いてくれません。
localStorageはサーバーにスクリプトを設置して、インターネットオプションをきちんと確認してから使うように心がけましょう。