IndexedDBの使用例（パッケージ版）

IndexedDB

(IndexedDBは、大量の構造化データをクライアント側に保存するための基礎となるAPIです）。

APIはインデックスを使用して、データの高性能検索を可能にします。

WebStorage は少量のデータの保存には便利ですが、大量の構造化データの保存には十分ではありません。IndexedDB は、このシナリオに対するソリューションを提供します。

特定のパッケージ

/** IndexedDB 使用例
 // @params: 最初のパラメータ: db名前、2番目のパラメータ: テーブル名、3番目のパラメータ: データベースの主キーに似ている
 initDB('db', 'mytable', 'url') //  
 // @params: 3番目のパラメータは、格納する値である
 setVal('db', 'mytable', {url: 222, data: {a: }}) //  
 
 // @params: 3番目のパラメータは主キーペアの値で、この値に従って、格納されている値を取得する。
 getVal('db', 'mytable', 222, (e) => { console.log(e) }) // データを取得する: {url: 222, data: { }}
 注：初期化に成功すると、コンソールでアプリケーションを見ることができる。 新しいDBを登録した後、コンソールでアプリケーションを見るには、一旦コンソールを閉じ、再度開く必要がある。
 */
export const initDB = function (dbName, tableName, key) {
 // dbを初期化する
 const IndexedDB = window.indexedDB.open(dbName)
 IndexedDB.onupgradeneeded = function (event) { // 指定されたバージョン番号がデータベースの実際のバージョン番号より大きい場合、データベースのアップグレードイベント、upgradeneeded が発生する。
 // 新しいデータベースを作成する
 const result = event.target.result;
 if (!result.objectStoreNames.contains(tableName)) { // まず、ライブラリが存在するかどうかを調べる
 result.createObjectStore(tableName, { keyPath: key }) // テーブルの主キーは url である。{url: 'xx', data: {xx}} 主キーは自動的にインデックス化される
 .createIndex(key, key, { unique: true }) // インデックスを作成する
 }
 IndexedDB.result.close()
 }
}
export const setVal = function (dbName, tableName, setData) {
 try {
 const IndexedDB1 = window.indexedDB.open(dbName)
 IndexedDB1.onsuccess = function (event) {
 const db = IndexedDB1.result;
 db.transaction([tableName], 'readwrite') // アクセスするデータベース名を指定する
 .objectStore(tableName) // データベースオブジェクトを返す
 .put(setData)
 db.close()
 }
 } catch (error) {
 console.error(error)
 }
}
export const getVal = function (dbName, tableName, key, cb) {
 const IndexedDB2 = window.indexedDB.open(dbName)
 IndexedDB2.onsuccess = function (event) {
 const db = IndexedDB2.result;
 if (db.objectStoreNames.contains(tableName)) {
 const request = db.transaction([tableName], 'readwrite')
 .objectStore(tableName)
 .get(key) // key : JSON.stringify(opt)
 request.onsuccess = function (event) {
 if (request.result) {
 cb(request.result)
 return true
 } else {
 throw 'indexDB 取得に失敗した。: ' + key
 }
 }
 }
 db.close()
 }
}