UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

IndexedDBとは

Firebase Auth を使って認証を行った後、そのユーザがログイン中かどうかを判断するのに Firebase SDK は何を使って判断しているのかを探してみると、 どうやらブラウザ内のIndexedDB内に保存されている情報を利用していることがわかった

f:id:uggds:20200111010640p:plain

ところで、このIndexedDBってどういうものなのかがわからなかったので概要を調べてみた

使い方は別の機会に

基本的な概念

  • IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段
  • localStorage よりも多くのデータを格納することができる
  • オンラインとオフラインの両方で動作する

重要な概念

IndexedDB データベースはキーと値のペアを保存する

  • 値は複雑な構造のオブジェクトにすることができる
  • キーはそれらのオブジェクトのプロパティにすることができる
  • 分類された一覧表だけでなく、高速検索のためにオブジェクトの任意のプロパティを使用するインデックスを作成することができる

IndexedDB はトランザクショナルデータベースモデルに基づいて構築される

IndexedDB API はほぼ非同期

  • API はデータを戻り値として返さないので、コールバック関数を渡さなければならない
  • 同期的な方法でデータベースに値を "保存" したり、データベースから値を "取り出す" ことはない代わりに、データベースで実行する操作を "要求" する
  • 操作が完了すると DOM イベントによって通知され、イベントの種類によって操作が成功したか失敗したかを知ることができる

IndexedDB は結果が使用可能であることを通知するために、DOM イベントを使用する

  • DOM イベントは必ず type プロパティを持っている (IndexedDB では、一般的に "success" または "error" が設定される)
  • DOM イベントは target プロパティも持っており、イベントがどこで生じたかを示す
  • 成功イベントは伝播せず、またキャンセルできない
  • エラーイベントは伝播し、キャンセルも可能

IndexedDB はオブジェクト指向

  • 行と列の集合で表されるテーブルによるリレーショナルデータベースではない
  • データの型と、単に持続的な JavaScript オブジェクトを保存するためのオブジェクトストアを作成しなければならない

IndexedDB は Structured Query Language (SQL) を使用しない

IndexedDB は同一生成元ポリシーに従う

  • 生成元は、スクリプトを実行したドメイン、アプリケーション層プロトコル、ドキュメントの URL のポート
  • それぞれの生成元が、自身に関連付けられたデータベースセットを持つ
  • すべてのデータベースが、どの生成元に所属するかを識別する名称を持つ
  • IndexedDB に与えられたセキュリティ境界は、アプリケーションが別の生成元のデータにアクセスできないようにする
    例えば http://www.example.com/app/ のアプリやページは、同一生成元である http://www.example.com/dir/ からデータを取り出すことができる
    しかし、生成元が異なる http://www.example.com:8080/dir/ (ポートが異なる) や https://www.example.com/dir/ (プロトコルが異なる) からデータを取り出すことはできない

サードパーティの window コンテンツ (例えば <iframe> コンテンツ) は、ブラウザーサードパーティ Cookie を常に拒否するように設定していない限り、自身が組み込まれた生成元の IndexedDB ストアにアクセスできる

ブラウザのサポート状況

ほとんどのブラウザで使える
https://caniuse.com/#feat=indexeddb

参考

Indexed Database API 2.0
基本的な概念 - Web API | MDN
IndexedDB API - Web API | MDN