各種モダンブラウザに搭載されているlocalStorage機能、皆さんは利用してますでしょうか。

今回は、localStorageを用いて、ブラウザのローカルストレージにデータを保存できるライブラリ、「Store.js」を紹介します。

localStorageとは

localStorageは、HTML5で新たに追加されたデータをブラウザ側に保存しておく仕組みのことです。

localStorageは、サイト毎に、キーと値の組み合わせでデータを保存しておきます。データが削除されない限り、ブラウザをリロードしてもデータは残り続けます。

サイト毎の領域はそれぞれ独立していて、サイトから他のサイトのデータは取得できません。また、サイト毎に保存できる容量が制限されます。容量はブラウザによって異なります。

ブラウザにデータを保存？ Cookieを使えばいいじゃん！！

と思うかもしれませんが、Cookieとは利用用途が完全に異なります。

localStorageは、JavaScriptで利用するためのデータをブラウザ側に持たせておく機能で、Cookieのようにリクエストの度に値を送信したりしません。保存できる容量も、Cookieは4KBですが、localStorageはブラウザにもよりますが、少なくとも数MB以上は保存できます。

Amazonの「最近見た商品」などで利用されています。

「Store.js」とは

Store.jsは、localStorageをクロスブラウザで便利に利用できるようにした、オープンソースのJavaScriptライブラリです。

このライブラリを用いると、localStorageが実装されていない古いブラウザでも、代替方法（userData機能等）があれば、その機能を利用してデータを保存してくれます。また、その他の便利な機能もあります。

特に理由がなければ、localStorageを使う場合、無条件でStore.jsを導入してしまって問題ないでしょう。

以下のブラウザに対応しています。

• IE6+
• iOS 8+
• Android 4+
• Firefox 4+
• Chrome 27+
• Safari 5+
• Opera 11+

インストール

Store.jsのインストール方法です。

Node.jsを利用する場合、npmで簡単に導入できます。

npm install store

var store = require('store');
store.set('user', {name:'Marcus'});
store.get('user').name == 'Marcus';

そのまま読み込む場合は、こちらから最新版のソースコードを取得し、読み込みます。

<script src="path/to/my/store.legacy.min.js"></script>
<script>
    var store = require('store');
    store.set('user', {name:'Marcus'});
    store.get('user').name == 'Marcus';
</script>

基本的な利用方法

読み込んだstoreオブジェクトから、以下のように利用できます。

文字列や数字、オブジェクト等を保存する場合は、set()メソッドを利用します。

store.set('user', {name:'Marcus'});

JSON文字列に変換（JSON.stringify()）されるため、JSON文字列へ変換できる値である必要があります。

保存したデータを取得するには、get()メソッドを利用します。

store.get('user');

保存したデータを削除するには、remove()メソッドを利用します。

store.remove('user');

全てのデータを削除するには、clearAll()メソッドを利用します。

store.clearAll();

each()メソッドを使えば、保存されている全てのデータをループで取り出すこともできます。

store.each(function (value, key) {
    console.log(key + '=' + value);
});

以上が基本的な利用方法です。

この他にも、storeオブジェクトのメソッドを拡張できるプラグイン機能等があり、便利に利用することができるようになっています。詳しくはこちらからどうぞ。

まとめ

今回は、localStorageをクロスブラウザで便利に利用できるライブラリ「Store.js」を紹介しました。

ローカルストレージを使えば、いちいちサーバーと通信することなくユーザーのデータを利用することができるので、便利な場面も多いと思います。

ぜひ、利用してみてはいかがでしょうか。