Vue.js issue管理に登録したissueをストレージに保存する

個人開発したアプリの宣伝

目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。

Todo with Location

Yoshiko Ichikawa
Productivity
Free

スポンサードリンク

ブラウザを閉じたりリロードした後でも、登録、更新を行ったissueを再度表示できるようにする。

ストレージはローカル内で保存管理するものとし、サーバに送信したり取得したりといったことは行わない。

Vueでの処理

プロパティ issueList が追加、変更された場合、ローカルストレージに保存する

var app1 = new Vue({
  el: '#app1',
  data: {
    ...略
    issueList: []
  },
  watch:{
    issueList: {                     // (1)
      handler:function(){     // (2)
        localStorage.setItem("myissuemanage", JSON.stringify(this.issueList));  // (3)
      },
      deep: true  // (2)
    }
  },
  ...略

issueListの変更監視を定義
チケット状態が変更(配列内のオブジェクトのプロパティが変更)された場合も監視対象とする。監視しないとチケット状態の変更が保存されない。
キーをmyissuemanage としてローカルストレージに保存。配列なのでJSONに変換している。

Vueインスタンス生成時にローカルストレージからプロパティ issueList を復元する

var app1 = new Vue({
  el: '#app1',
  data: {
    ...略
    issueList: []
  },
  created: function(){    // (1)
    var jsonData = localStorage.getItem("myissuemanage");  // (2)
    if(jsonData){
      this.issueList = JSON.parse(jsonData);  // (3)
    }
  },
  ...略