beta

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

Vue.jsで使えるブラウザストレージ(クライアントサイドストレージ)の種類とそれぞれの対応ブラウザ、対応プラグインなどを調べて、メリット・デメリットなどを比べてみました。

公開日:2020年1月7日

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

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

  • クッキー
  • LocalStorage
  • IndexedDB
  • WebSQL

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

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

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

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

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

種類 Chrome Firefox Safari IE
LocalStorage 10MB 10MB 5MB 10MB
IndexedDB 端末の空き容量の10%まで 50MB 端末の空き容量の10%まで 250MB
WebSQL 端末の空き容量の10%まで 非対応 5-700MB 非対応

という感じでしょうか。

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

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

IndexedDB

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

Dexie

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

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

vue-idb

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

LocalStorage

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

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

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

localStorage

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


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

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

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