localStorageをcookieライクに利用するjQueryプラグイン

登録したまま放置していたSourceForgeに初めてjQueryプラグインをcommitしました。今いろいろとツールの整理をしていて、その中でlocalStorageについては思うようなものが存在しなかったため、自作→公開にいたりました。

commit後、リリースノートを書いている途中で、API設計が不充分でsessionStorageがまともに使えない(localStorageはちゃんと利用可能)ことがわかり、(sessionStorageについては)まったくテストしていないのがバレバレですorz
開発中はテストしていたのですが、途中でcookieライクにexpire指定を網羅するように変更した後のテストを怠っていました・・・

そのため、今後、sessionStorageをサポートする際には、プラグインのAPI仕様が変更になる可能性があります。
それでは使用方法などを解説します。

使い方はほぼcookie(jquery.cookie.js)と同じ手軽さ♬

jQueryプラグインの作法はいろいろあるようですが、使用感としてなるべく馴染みのあることを優先して、jquery.cookie.jsを流用しました。
そのため(現時点では)APIはほぼ同じ実装になっています。

◆普通の変数の場合

$(document).ready( function() {
    // オプション無しのデフォルトは"local"(localStorage)
    var hoge = "hogehoge";
    $.storage( "hoge", hoge );
    alert( $.storage( "hoge" ) );
} );

$(document).ready( function() {

// オプション無しのデフォルトは"local"(localStorage)

var hoge = "hogehoge";

$.storage( "hoge", hoge );

alert( $.storage( "hoge" ) );

} );

※key名にシングル／ダブルクォート、ブラケットも利用可能です。
　(決して使い勝手が良くなるとは思えませんが・・・)

配列、多次元配列、連想配列、JSONにも対応しています！

時代がMobileFirst→CongtentsFirst→OfflineFirstと言われ始めていますので、HTML5のlocalStorage(sessionStorageも！？)はますます重宝がられる手段になるはずです。
そして、これが自作した大きな理由ですが、配列やJSONにも対応していると、利用範囲と手軽さが格段に広がります。

◆配列の場合

$(document).ready( function() {
    // 配列
    var foo = [ "a", "b", "c" ];
    $.storage( "foo", foo );
    var result = $.storage( "foo" );
    for ( var i in result ) { alert( result[i] ); }
} );

$(document).ready( function() {

// 配列

var foo = [ "a", "b", "c" ];

$.storage( "foo", foo );

var result = $.storage( "foo" );

for ( var i in result ) { alert( result[i] ); }

} );

※現在は配列の添字はNumberではなくStringで返却されていまいます。

◆多次元配列の場合

$(document).ready( function() {
    // 多次元配列
    var foo = [ "a", "b", [ 100, 200 ] ];
    $.storage( "foo", foo );
    var result = $.storage( "foo" );
    for ( var i in result ) {
        if ( typeof result[i] === "object" ) {
            for ( var j in result[i] ) {
                alert( result[i][j] );
            }
        } else {
            alert( result[i] );
        }
    }
} );

$(document).ready( function() {

// 多次元配列

var foo = [ "a", "b", [ 100, 200 ] ];

$.storage( "foo", foo );

var result = $.storage( "foo" );

for ( var i in result ) {

if ( typeof result[i] === "object" ) {

for ( var j in result[i] ) {

alert( result[i][j] );

}

} else {

alert( result[i] );

}

} );

◆連想配列の場合

$(document).ready( function() {
    // 連想配列
    var foo = new Array();
    foo[ "a" ] = 100;
    foo[ "b" ] = 200;
    foo[ "c" ] = 300;
    $.storage( "foo", foo );
    var result = $.storage( "foo" );
    for ( var i in result ) { alert( result[i] ); }
} );

$(document).ready( function() {

// 連想配列

var foo = new Array();

foo[ "a" ] = 100;

foo[ "b" ] = 200;

foo[ "c" ] = 300;

$.storage( "foo", foo );

var result = $.storage( "foo" );

for ( var i in result ) { alert( result[i] ); }

} );

◆JSONの場合

$(document).ready( function() {
    // JSON
    var json = { "A" : 100, "B" : 200, "C" : 300 };
    $.storage( "json", json );
    var result = $.storage( "json" );
    for ( var i in result ) { alert( result[i] ); }
} );

$(document).ready( function() {

// JSON

var json = { "A" : 100, "B" : 200, "C" : 300 };

$.storage( "json", json );

var result = $.storage( "json" );

for ( var i in result ) { alert( result[i] ); }

} );

cookieライクにexrpire設定

せっかくlocalStorageを使うのに必要なのか！？という疑問で実装を躊躇していましたが、オプション対応することでjquery.cookie.jsを踏襲する落としどころと考えました。

◆expire設定する場合

$(document).ready( function() {
    var hoge = "hogehoge";
    // expire設定(単位は日)
    $.storage( "hoge", hoge, { expire : 1 } );
    alert( $.storage( "hoge" ) );
    // 無理矢理、昨日までの設定
    $.storage( "hoge", hoge, { expire : -1 } );
    alert( $.storage( "hoge" ) );
} );

$(document).ready( function() {

var hoge = "hogehoge";

// expire設定(単位は日)

$.storage( "hoge", hoge, { expire : 1 } );

alert( $.storage( "hoge" ) );

// 無理矢理、昨日までの設定

$.storage( "hoge", hoge, { expire : -1 } );

alert( $.storage( "hoge" ) );

} );

expirteをすぎた変数は読み出し時に削除していますが、タイミングは検討します。
また、sessionStorage対応するときには、expireの単位も「日」ではなく「秒」にすべきかもしれません。
この影響で、すでにAPIに変更が出る可能性がありますm(__)m

削除、クリア時の名前空間に配慮！

ドメインごとに管理されるWebStorageですが、このプラグイン以外でも利用されていることを想定し、その衝突防止の目的で、内部的に扱うkey名には “jquery.storage.” のプレフィクスを付けています。
またWebStorageネイティブのclear()は利用せず、独自にプレフィクスを含むkey名を削除するような極力セーフティな設計＆実装にしています。
このプラグイン以外から clear() されてしまったら元も子もありませんけどね(^^;
(clear等のイベントリスナー設定が可能なようですが事後イベントのようなので対応は見送っています)

◆特定のlocalStorage変数を削除

$(document).ready( function() {
    $.removeStorage( "json" );
} );

$(document).ready( function() {

$.removeStorage( "json" );

} );

◆localStorage変数を(jquery.storage.jsで保存した)すべてクリア

$(document).ready( function() {
    $.clearStorage();
} );

$(document).ready( function() {

$.clearStorage();

} );

保存データには注意してくださいネ

あなたが実装する「Webアプリケーション」が何らかのJSコードをどこかのCDNから読み込んでいる場合、容易にWebStorageを読み出すことが可能です。

利用者のパスワードほか機密性の高い情報は保存しないようにしてください。

そういった情報はやはり従来どおりSSLでサーバ送信→保存し、セッションID(sessionStorageではない)識別をすべきです。
※前述のclear()が可能というのも同じことです。

つまり、ドメインごとに空間が守られているのは上書き防止と、別(サブ)ドメインの「Webアプリケーション」からは読み出せないということのみで、Ajax通信のようなXSS制約(Access-Control-Allow-Originでのみ制約解除)はありません。