Vue.jsで使えるブラウザストレージを調べた

Vue.jsが対応しているクライアントサイドストレージ

Vue.js 公式サイトによると、下記のクライアントサイドストレージ（以下、ブラウザストレージ）が使えるようです。

• クッキー
• LocalStorage
• IndexedDB
• WebSQL

クライアントサイドストレージは、クッキー, ローカルストレージ（技術的には “Web Storage”）, IndexedDB, および WebSQL（新しいプロジェクトでは使用しないでください）で実行できます。

各ストレージのブラウザ別対応と容量

次に、ストレージを使う際にブラウザが対応していないといけないのと、データを溜め込んでおける容量も重要になってくるので、そちらを調べます。ちょっと古い記事ですが、下記のページに詳しくまとめてあるので詳細はそちらをどうぞ。

モダンブラウザのストレージ容量まとめ

上記のVue.jsで使えるブラウザストレージでまとめると、

という感じでしょうか。

上記から考えると、Vue.jsで使うブラウザストレージは、LocalStorageかIndexedDBが良さそうです。

Vueで使うためのプラグイン

IndexedDB

JavascriptでIndexedDBを使うプラグインとしては、Dexieが人気のようです。簡単にテストしてみたところ、Vue.jsアプリでもDexieを使うことができました。

Dexie

普通のORMラッパー的な感じで操作ができるので、Railsなどのフレームワークに慣れている方には馴染みやすそうです。

Vue.jsに最適化された？IndexedDBのプラグインは下記のものもありました。

vue-idb

IndexedDBについては、データベースのように操作できる分、複雑なデータを操作できるのがメリットですが、逆にきちんとロジックを組まないといけないので、どこまでIndexedDBで持つかとをしっかりと考える必要がありそうです。

LocalStorage

こちらは公式サイトのクックブックにも掲載されている通り、いくつかのプラグインがあります。

• vue-local-storage
• vue-reactive-storage
• vue2-storage

好みで選べば良さそうですが、パッと見た感じはvue2-storageが人気そうです。

また、LocalStorageについては、特別プラグインを使わなくても、

localStorage

で呼び出せるので、気軽に使えるというメリットもあります。

Vue.jsで使えるブラウザストレージをまとめてみました。

筆者自身は、LocalStorageはVuexと一緒に普段から使っているのですが、拡張性を考えるとIndexedDBも使ってみたいなと思いました。

IndexedDBについてはまた使ってみてまとめたいと思います。