LocalStrageがIE6でも使える優れものjstorage.js
LocalStrageがIE6でも使える jstorage.js
以前CookieがjQueryで簡単に扱えるようになるjQueryプラグインを紹介しましたが、今回はLocalStrageが使えるようになるJavascriptプラグインを紹介します。
(今回はjQueryのプラグインではありませんが、jQuery内でも使えます。)
jstorage.jsの特徴
・LocalStrageがIE6、7でも使えるようになる
・プラグインが軽量3.6KB
・Prototype, MooTools,jQueryの主要ライブラリいずれも利用可能
・プラグインが軽量3.6KB
・Prototype, MooTools,jQueryの主要ライブラリいずれも利用可能
サポートブラウザ
本来LocalStrageが使えないブラウザでも使えるようになります。
・IE6+, Firefox2+, Safari4+, Chrome4+ and Opera 10.5+
保存容量
Cookieは１ドメイン20件、1Cookieにつき4 キロバイトの制限があり、さすがLocalStrageといったカンジで各ブラウザともそれなりの容量が保存できますが、IE6、7に関しては128KBと少なめ。
それでもCookieに比べると容量が多く、助かります。
Chrome 4……5 MB
Firefox 3.6……5 MB
Firefox 3……5 MB
Firefox 2……5 MB
IE8……10 MB
IE7……128 kB
IE6……128 kB
Opera 10.50……5 MB
Firefox 3.6……5 MB
Firefox 3……5 MB
Firefox 2……5 MB
IE8……10 MB
IE7……128 kB
IE6……128 kB
Opera 10.50……5 MB
jstorage.jsの基本的な使い方
読み込み方法
jQueryで扱う場合、jquery.jsonというプラグインが無いと動作しません。Prototype, MooToolsでは不要のようです。読み込む順番のこの順番でいきます。
<script src="jquery-1.7.1.js"></script>
<script src="jquery.json-2.3.min.js"></script>
<script src="jstorage.js"></script>
<script src="jquery.json-2.3.min.js"></script>
<script src="jstorage.js"></script>
LocalStrageの書き込みと呼び出し
jQueryなら以下のようになります。
//書き込み(jQueryのセレクタで当然OKなわけで・・)
$.jStorage.set(“name”,$(‘#name’).attr(‘value’));
//呼び出し
$.jStorage.get(“name”);
//書き込み(jQueryのセレクタで当然OKなわけで・・)
$.jStorage.set(“name”,$(‘#name’).attr(‘value’));
//呼び出し
$.jStorage.get(“name”);
注意点
私はIEテスターでもデバックしたのですが、IEテスター上では本来対応ブラウザであるIE8ですら確認出来ませんでしたが、古いマシンのIE7やXPのIE8でも無事動作することは確認出来ましたので、IEテスターで確認して『動かなかった！』とがっかりしなくても大丈夫のようです。
LocalStrageのサンプル
最後に以前Cookieでフォームの内容を保存するサンプルを投稿したのですが、あれのLocalStrage版を紹介したいと思います。
<script type="text/javascript">
$(function(){
$(‘#name’).val($.jStorage.get("name"));
$(‘#age’).val($.jStorage.get("age"));
$(‘#email’).val($.jStorage.get("email"));
$(‘#tel’).val($.jStorage.get("tel"));
$(‘#text’).val($.jStorage.get("text"));
var getStrage = function () {
$.jStorage.set("name",$(‘#name’).attr(‘value’));
$.jStorage.set("age",$(‘#age’).attr(‘value’));
$.jStorage.set("email",$(‘#email’).attr(‘value’));
$.jStorage.set("tel",$(‘#tel’).attr(‘value’));
$.jStorage.set("text",$(‘#text’).attr(‘value’));
};
$("#submit").click(getStrage);
});
</script>
$(function(){
$(‘#name’).val($.jStorage.get("name"));
$(‘#age’).val($.jStorage.get("age"));
$(‘#email’).val($.jStorage.get("email"));
$(‘#tel’).val($.jStorage.get("tel"));
$(‘#text’).val($.jStorage.get("text"));
var getStrage = function () {
$.jStorage.set("name",$(‘#name’).attr(‘value’));
$.jStorage.set("age",$(‘#age’).attr(‘value’));
$.jStorage.set("email",$(‘#email’).attr(‘value’));
$.jStorage.set("tel",$(‘#tel’).attr(‘value’));
$.jStorage.set("text",$(‘#text’).attr(‘value’));
};
$("#submit").click(getStrage);
});
</script>