ローカルストレージに気軽にJSONデータを取り込めるLawnchair

あるアプリを作ろうとしていてローカルストレージが必用になったので、調べてみたらLawnchairというものを見つけました。これを使うとブラウザのローカルストレージへ気軽にJSON形式のデータをCRUDすることができるようになります。
サンプルとして、自分のひとことをローカルストレージへ保管するものを試してみました。

テキストに何か打ち込んで、postボタンを押すと下に一覧として出てくるだけです。Chromeのデベロッパーツールで見ると、ちゃんとローカルストレージに格納されているのがわかります。"words"となっているのは自分で定義したグループで、関連したデータはこのグループ配下に入り込むようになります。椅子が一脚あって、そこになにかがどんどん積み重なっていく感じでしょうか。

サンプルのコード全体はGithubにあります。

最初にデータグループを定義。

  var store = new Lawnchair({name:'words'},function(store){ ... }

後はsaveメソッドで保存。キーをしていないと、uuidで自動的に採番してくれます。CouchDBっぽいな。既存のキーを指定すると更新になります。

  $("#words-btn").click(function () {
    // save data.
    store.save({words:$("#words").val()});
    $("#words-list").load();
  });  	

 $("input.words-edit").keypress(function (keycode) {
      if (keycode.which == 13) {
          var id = $(this).parent("li").attr("id");
          store.save({key:id,words:$(this).val()});
      }
  });  	

削除はremove。公式ドキュメントにはdestroyとなっていたけど、コード見たら実際はremoveというメソッドで実装されていました。

    store.remove(id,function(){
    	$(this).parent("li").remove();
        $("#words-list").load();
    });

プラグインが複数あって、それらを追加するとより柔軟なストレージ操作ができるようです。便利ですね。