HTML5で提供される新しいAPIの一つにlocalStorageがあります。使ってみたいと思いつつも何となく面倒そうで避けてしまっている、なんて人もいるのではないでしょうか。利用するのに複雑な仕組みになっているとつい敬遠してしまうでしょう。 そこで紹介したいのがLockrです。ごく小さなlocalStorageラッパーで、高校のロッカーくらい簡単な仕組みだそうです。

使い方

Lockrは依存ライブラリもなく、JavaScriptファイルを読み込むだけで使えます。

<script src="/path/to/lockr.js" type="text/javascript"></script>

これで準備完了です。

デモ

APIはRedisを参考にしている層で、set/getでシンプルに使えます。

Lockr.set('username', 'Coyote'); // 文字列を保存
Lockr.set('user_id', 12345);     // 数字を保存

オブジェクトを保存する際にはhsetを使います。

Lockr.hset('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);

データの取得は全てgetでできます。

Lockr.get('username');
> "Coyote"

Lockr.get('user_id');
> 12345

Lockr.get('users');
>  [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]

後は全データを取得するのにgetAllがあります。

Lockr.getAll();
> ["Coyote", 12345, [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]]

蓄積されているデータを消す時にはflushを使います。

localStorage.length;
> 3
Lockr.flush();
localStorage.length;
> 0

Lockrは確かにシンプルでKVSとして使えるのでとても簡単です。ちょっとしたJSONを保存したり、入力データを保存して復元できるようにしたりするのも簡単そうです。localStorageを使ってみようと思わせてくれる面白いライブラリです。 LockrはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 tsironis/lockr