原文: Storing images and files in IndexedDB (on February 23, 2012 by Robert Nyman)

以前、私たちは localStrage に画像とファイルを保存 する方法について書きましたが、それは、今日でも利用できる実用的な方法でした。しかし、この方法には localStrage と密接に関わるパフォーマンスの問題 (このブログの後半で扱います) がいくつもあるため、IndexedDB を活用することが将来のアプローチ方法として望まれます。ここでは、IndexedDB に画像とファイルを格納し、ObjectURL を通して提供する方法をお教えします。

一般的なアプローチ

はじめに、手順について話しましょう。IndexedDB データベースを作成し、ファイルをそのデータベースに保存し、そのデータをページに読み出して提供します:

1. データベースを作成するか開く
2. objectStore を作成する (まだ存在しなければ)
3. 画像ファイルを blob として取り込む
4. データベースのトランザクションを初期化する
5. その blob をデータベースに保存する
6. 保存したファイルを読み出し、そのデータから ObjectURL を作成してページ内の画像要素の src にセットする

コードを書く

それでは、これらのことを行うのに必要なコードのすべての部分を分析しましょう:

データベースを作成するか開く