とっとこ駆け出しエンジニアぶろぐ: HTML5の新機能localStorageを使ったライブラリLockr.jsをやってみる

2014年2月4日火曜日

HTML5の新機能localStorageを使ったライブラリLockr.jsをやってみる

localStorageは、HTML5の新機能であるWeb Storageの１種で、クライアントサイドのKVSです。
そのlocalStorageをラップしたOSSのライブラリLockr.jsをやってみます。

HTML5の新機能ってCanvasとかWebSocketぐらいしか実は触ったことなかったりする。

#####環境構成
* HTML5
* Chrome 32.0.1700.102

#####Web Storageとは？
Web Storageとは、HTML5の機能でクライアントサイド(ブラウザ)に、データを保存するストレージです。 
JavaScriptでデータにアクセスします。 
cookieと同じような仕組みですが、cookieよりも大容量のデータを扱えます。 
 
Web Storageには２種類あります。

* localStorage
* sessionStorage

localStorageは、オリジン(ドメイン:ポート番号)単位でデータを永久的に保持する 
 
sessionStorageは、データをブラウザのタブ単位でデータを保持する 
タブを閉じるとデータは失われる

#####やってみる
Lockr.jsは、localStorageを使うのでブラウザ(タブ)を閉じてもデータを保持してくれます。 
 
GitHubからソースを入手します。 
<a href="https://github.com/tsironis/lockr">https://github.com/tsironis/lockr</a> 
 
すごく簡単でした。README.mdをみれば直感的に操作できると思います。 
一応、使い方をメモ

####lockr.jsを読み込む

####セットする    
数値又は文字列をセットするときは、Lockr.set
オブジェクト又は配列をセットするときは、Lockr.hset です。

<pre class='brush: javascript'>
// 数値
Lockr.set('user_id', 12345);
// 文字列
Lockr.set('username', 'My Name');
// オブジェクト又は配列
// Lockr.hset(key, object|array)
Lockr.hset('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);
</pre>

####ゲットする 
ゲットするときはLockr.getです。 
全て保存したデータすべてゲットするときは、Lockr.getAllです。

<pre class='brush: javascript'>
Lockr.get('username');
> "My Name"

Lockr.get('user_id');
> 12345

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

####全て削除する 
全て削除するときは、Lockr.flushです。

<pre class='brush: javascript'>
Lockr.flush();
</pre>

一つ気になったのが、データを１件指定して削除できないこと。 
Lockr.flushは、全て削除してしまうため不便です。 
localStorage.removeItem(key)で削除できるのですが、それをラップした関数が見当たらない... 
何か理由があるのかう～ん。 
プルリク送ってみようかなぁ？知人にしかプルリク送ったことないからどういう風にやったらいいかわからない（＾＾； 
ちょっと勉強してみます！何かアクションしたらブログに載せたいと思います！ 
 
2014/02/05 Lockr.jsのリポジトリにIssuesを書いてみました！ 
<a href="http://hamuhamuengineer.blogspot.jp/2014/02/githubissues.html#more">GitHub　初めて他人のリポジトリにIssuesを書いた</a> 
 
#####最近読んだ本