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


ブラウザを閉じたりリロードした後でも、登録、更新を行った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)
    }
  },
  ...略
  1. issueListの変更監視を定義
  2. チケット状態が変更(配列内のオブジェクトのプロパティが変更)された場合も監視対象とする。監視しないとチケット状態の変更が保存されない。
  3. キーを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)
    }
  },
  ...略
  1. Vueインスタンス作成後にプロパティ issueList を初期化する処理を定義
  2. キー:myissuemanageに保存されたデータを取得する
  3. 保存されたJSONデータをjs配列にデコードする

サンプルコード

Vue-Samples/issue.html at 9235360e06af21672b10e7c1c9b67cd107278a87 · letitride/Vue-Samples · GitHub