localStorage をもっと便利に

ウェブアプリなどがブラウザ内にデータを保存するための localStorage は文字列しか保存できません。

なので、配列やJSONなどのObjectなどを一旦JSON.stringify()で文字列にしてから保存し、取り出した後はJSON.parse()して元に戻してやる必要があります。

少し不便ですね。

そしてさらに、もうひとつ厄介なことがあります。実はこの localStorage は Chromeアプリ内では使用することができないのです。Chromeアプリには chrome.storage.localという非同期型のストレージAPIが用意されており、これが localStorage の代わりになります。*1

そこで、この２つの不便さを解消する、つまり、

Object を Object のまま保存できる
ブラウザとchromeアプリ意識せずにストレージを呼ぶことが出来る
これまでの手軽さを保つ

の３つの条件を満たす storage を目指して、新たにラッパースクリプト「appStorage.js」を書いてみました。

appStorage.js

chromeアプリかブラウザかを見分ける。以下の方法で見分けています：

chromeアプリならばchrome.storage.localに、ブラウザならばlocalStorageを保存先とする。
保存先がlocalStorageであれば、Objectが与えられた場合、setの際にJSON.stringify()とgetの際にJSON.parse()する。

以上のことを自動で行います。使う場合はappStorageを呼ぶだけでOKです。appStorageは以下のように使用することができます。Callback関数の引数には、取得またはセットしたitem、key配列が与えられます。

(function(key, value) {
    //
    // SET
    //
    appStorage({"key": key, "value": value}, "set", function() {
        //
        // GET
        //
        appStorage(key, "get", function() {
            //
            // REMOVE
            //
            appStorage(key, "remove")
        });
    });
})("test2", [{"name": "daiz"}, 2, "test"]);

これを実行してみると、ブラウザであっても、chromeアプリであっても、次のように全く同じ結果が得られます。