20: LocalStorageを使ってデータを永続化する

1. backbone.localStorage.jsをダウンロードして読み込む

以下のファイルをダウンロードしてjs/lib以下に配置し、読み込みます。

backbone.localStorage.js

index.html

<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/moment.js"></script>
<script src="js/lib/backbone.localStorage.js"></script>
<script src="js/app.js"></script>
<script src="js/model.js"></script>
<script src="js/view.js"></script>

2. CollectionにlocalStorageを指定する

CollectionのlocalStorage属性にBackbone.LocalStorageのインスタンスを設定します。

js/model.js

App.Schedules = Backbone.Collection.extend({
  model: App.Schedule,

  localStorage: new Backbone.LocalStorage('calendar'),
  //...

3. モデルの保存メソッドの変更

setをsave、addをcreateにそれぞれ変更します。

js/view.js

App.FormDialogView = Backbone.View.extend({
  //...
  onSubmit: function(e) {
    //...

    if (this.model) {
      this.model.save(params, { validate: true });
    }
    else {
      this.collection.create(params, { validate: true });
    }
  },
  //...
});

4. Modelにparseメソッドを追加

ローカルストレージにはmomentのようなオブジェクトは持てないので、ローカルストレージからモデルに復元するときに呼ばれるparseメソッドで変換する。

js/model.js

App.Schedule = Backbone.Model.extend({
  //...
  parse: function(attrs) {
    attrs.datetime = moment(attrs.datetime);
    return attrs;
  },
  //...
});

5. ローカルストレージのデータを復元する

fetchメソッドでローカルストレージのデータを復元します。

js/app.js

window.App = {};
App.mediator = _.extend({}, Backbone.Events);

$(function() {
  var schedules = new App.Schedules();
  schedules.fetch();

  //...
});