【Vue.js】LocalStorageにデータを保存する方法

Introduction

こんにちは、JJ(@JJ_1123_I)です!
今回は、「Vue.jsでLocalStorageにデータを保存方法」についてまとめていきたいと思います。

対象

  • Vue.js初心者の方

LocalStorageとは?

一言で表すとブラウザ(クライアント側)にデータを保有する機能です。Cookie に比べてデータ保存容量が大きく保存期間が長いので、様々なデータを保存可能なのが特徴です。
「ユーザごとのデータを保存して利用したいけどログイン機能をつけるほどでもない」という時に使えそうですね。ブラウザでユーザを識別出来るので、データを扱う手間が無くなります。

配列の変更を監視し、LocalStorageに保存

何らかの変更が加えられた際、LocalStorageに保存するとしたいと思います。
なので、$watchメソッドを利用すれば良いですね。ただ、以下だと配列の追加や削除を検出してくれますが、配列の中身の要素までは変更を検知してくれません。。。 そこで、「deep watcher」という仕組みを使います。handlerと記載し、 deep オプションを true にします。これで配列の変更も検知して保存してくれるはずです。macOS だと 「option + command + I」 でデベロッパーツール開くので、その中の Application パネルで保存されているか確認してみてください。

LocalStorageの呼び出し

あとは、マウントされるタイミングでデータが読み込みされれば良いので、 mountedにそのときの処理を関数の中に記載しましょう。

まとめ

localStorageは意外と簡単な記載だけでOKなので楽ですね。
あと、データの変更に対して反応する、watchオプションはとても便利。

参考

https://qiita.com/Keitaro/items/8e3f8448d1a0fe281648
【サンプル付き】Local Storageとは?使い方を詳しく解説

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です