読者です 読者をやめる 読者になる 読者になる

daiizの自由帳

フレンチフライ トリュフ塩仕立て

localStorage をもっと便利に

作品

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

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

少し不便ですね。

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

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

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

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

appStorage.js

  • chromeアプリ か ブラウザ かを見分ける。以下の方法で見分けています:
  • chromeアプリならばchrome.storage.localに、ブラウザならばlocalStorageを保存先とする。
  • 保存先がlocalStorageであれば、Objectが与えられた場合、setの際にJSON.stringify()とgetの際にJSON.parse()する。

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

(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アプリであっても、次のように全く同じ結果が得られます。

ブラウザで実行

f:id:daiiz:20140910162839p:plain

Chromeアプリで実行

f:id:daiiz:20140910162935p:plain


appStorage.js を入手する

ソースコードGitHubから入手することができます。より便利になるように、自分でdogfoodingして改良を続けていきます。

daiz713/appStorage · GitHub


*1:こちらは、ObjectをObjectのまま保存できるので localStorage より優れ物です。