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()
}
}