【Vue.js】リストのデータを Local Storage で永続化する方法

Vue.js で Local Storage を使う場合 vue-ls というライブラリがあるのですが、ボタンクリックでリスト内のデータ追加、削除を行なうような場合にはその都度リストデータを Local Storage に保存してしまえば良いのではないかと思います。

環境

• Vue.js 2.5.9

処理

export default {
  data() {
    return {
      items: [],
      json: ''
    }
  },
  mounted() {
    this.items = JSON.parse(localStorage.getItem('items')) || [];
  },
  methods: {
    addItem() {
      this.items.push('item_' + this.items.length);
      this.setItems();
    },
    deleteAllItems() {
      this.items = [];
      this.setItems();
    },
    setItems() {
      localStorage.setItem('items', JSON.stringify(this.items));
    }
  }
}

mounted()

マウントしたときに Local Storage からデータを取得しています。このとき、Storage にデータが無ければ空の配列を代入しています。

もともと該当のプロパティは配列で初期化しているのでちょっと違和感のある処理ですが、 if でやると冗長になるかと思ってこれにしました。

setItems()

配列を JSON テキストにして Local Storage に保存しています。

データの変更を行ったときには必ず行う処理なのでメソッドにしておきました。

addItem(), deleteAllItems()

データの操作です。

配列を変更した後で配列を JSON 化、JSON テキストを Local Storage に登録しています。

Vue.js はリストを管理する系のアプリを作るのが簡単ですね。ページをリロードしてもデータが失われないようにすることで、結構いろいろなツールを作れそう。