IndexedDBに飛び込む

IndexedDBは、長年にわたってブラウザに導入されたストレージ機能の1つです。これは、最新のすべてのブラウザでサポートされているWebデータベースであるIndexedDBの概要です。

IndexedDBの概要

IndexedDBは、長年にわたってブラウザに導入されたストレージ機能の1つです。これは、次のように見なされるキー/値ストア(noSQLデータベース)です。ブラウザにデータを保存するための決定的なソリューション

これは非同期APIです。つまり、コストのかかる操作を実行してもUIスレッドがブロックされることはなく、ユーザーにずさんなエクスペリエンスを提供します。一定のしきい値を超えると、ユーザーはサイトに高い制限を与えるように求められますが、無制限の量のデータを保存できます。

それは最新のすべてのブラウザでサポート

トランザクション、バージョン管理をサポートし、優れたパフォーマンスを提供します。

ブラウザ内では、次のものも使用できます。

  • クッキー:ごく少量の文字列をホストできます
  • Webストレージ(またはDOM Storage)、2つのキー/値ストアであるlocalStorageとsessionStorageを一般的に識別する用語。 sessionStorageはデータを保持しません。データはセッションの終了時にクリアされますが、localStorageはセッション間でデータを保持します

ローカル/セッションストレージには、サイトごとに2MBから10MBのスペースを提供するブラウザーの実装により、小さい(そして一貫性のない)サイズに制限されるという欠点があります。

過去にもWeb SQL、SQLiteのラッパーですが、これは非推奨また、一部の最新のブラウザではサポートされていないため、標準として認識されたことがないため、使用しないでください。ただし、ユーザーの83%がこのテクノロジーをデバイスに搭載しています。使用できますか

技術的にはサイトごとに複数のデータベースを作成できますが、通常は単一のデータベースを作成する、およびそのデータベース内で作成できます複数のオブジェクトストア

データベースはドメインにプライベートそのため、他のサイトは別のWebサイトIndexedDBストアにアクセスできません。

各ストアには通常、物事

  • 文字列
  • 数字
  • オブジェクト
  • 配列
  • 日付

たとえば、投稿を含むストアとコメントを含むストアがあるとします。

ストアには、オブジェクトを識別する方法を表す一意のキーを持つアイテムがいくつか含まれています。

追加、編集、削除の操作を実行し、それらに含まれるアイテムを反復処理することにより、トランザクションを使用してこれらのストアを変更できます。

の出現以来約束ES6では、その後のAPIのpromiseの使用への移行により、IndexedDBAPIは少し見えます古い学校

何も問題はありませんが、これから説明するすべての例では、IndexedDB Promised LibraryJake Archibaldによるものです。これは、IndexedDB APIの上にある小さなレイヤーで、使いやすくなっています。

このライブラリは、IndexedDBに関するGoogle DevelopersWebサイトのすべての例でも使用されています。

IndexedDBデータベースを作成する

最も簡単な方法は、unpkg、これをページヘッダーに追加することにより:

<script type="module">
import { openDB, deleteDB } from 'https://unpkg.com/idb?module'
</script>

IndexedDB APIを使用する前に、ブラウザでのサポートを必ず確認してください。広く利用可能であっても、ユーザーがどのブラウザを使用しているかはわかりません。

(() => {
  'use strict'

if (!(‘indexedDB’ in window)) { console.warn(‘IndexedDB not supported’) return }

//…IndexedDB code })()

方法データベースを作成する

使用するopenDB()

(async () => {
  //...

  const dbName = 'mydbname'
  const storeName = 'store1'
  const version = 1 //versions start at 1

  const db = await openDB(dbName, version, {
    upgrade(db, oldVersion, newVersion, transaction) {
      const store = db.createObjectStore(storeName)
    }
  })
})()

最初の2つのパラメーターは、データベース名とバージョンです。オプションの3番目のパラメーターは、関数を含むオブジェクトです。バージョン番号が現在インストールされているデータベースのバージョンよりも大きい場合にのみ呼び出されます。関数本体では、データベースの構造(ストアとインデックス)をアップグレードできます。

ストアへのデータの追加

ストアの作成時にデータを追加し、初期化します

あなたはputオブジェクトストアのメソッドですが、最初にそれへの参照が必要です。これはから取得できます。db.createObjectStore()私たちがそれを作成するとき。

使用する場合put、値は最初の引数、キーは2番目の引数です。これは、指定するとkeyPathオブジェクトストアを作成するときは、すべてのput()リクエストでキー名を入力する必要はなく、値を書き込むだけで済みます。

これは移入しますstore0作成するとすぐに:

(async () => {
  //...
  const dbName = 'mydbname'
  const storeName = 'store0'
  const version = 1

const db = await openDB(dbName, version,{ upgrade(db, oldVersion, newVersion, transaction) { const store = db.createObjectStore(storeName) store.put(‘Hello world!’, ‘Hello’) } }) })()

トランザクションを使用して、ストアがすでに作成されているときにデータを追加する

後でアイテムを追加するには、読み取り/書き込みを作成する必要がありますトランザクション、データベースの整合性を保証します(操作が失敗した場合、トランザクション内のすべての操作がロールバックされ、状態が既知の状態に戻ります)。

そのためには、への参照を使用してくださいdbPromise呼び出したときに取得したオブジェクトopenDB、および実行:

(async () => {
  //...
  const dbName = 'mydbname'
  const storeName = 'store0'
  const version = 1

const db = await openDB(/* … */)

const tx = db.transaction(storeName, ‘readwrite’) const store = await tx.objectStore(storeName)

const val = ‘hey!’ const key = ‘Hello again’ const value = await store.put(val, key) await tx.done })()

ストアからデータを取得する

ストアから1つのアイテムを取得する:get()

const key = 'Hello again'
const item = await db.transaction(storeName).objectStore(storeName).get(key)

ストアからすべてのアイテムを取得する:getAll()

保存されているすべてのキーを取得します

const items = await db.transaction(storeName).objectStore(storeName).getAllKeys()

保存されているすべての値を取得します

const items = await db.transaction(storeName).objectStore(storeName).getAll()

IndexedDBからのデータの削除

データベース、オブジェクトストア、およびデータの削除

IndexedDBデータベース全体を削除します

const dbName = 'mydbname'
await deleteDB(dbName)

オブジェクトストアのデータを削除するには

トランザクションを使用します:

(async () => {
  //...

  const dbName = 'mydbname'
  const storeName = 'store1'
  const version = 1

const db = await openDB(dbName, version, { upgrade(db, oldVersion, newVersion, transaction) { const store = db.createObjectStore(storeName) } })

const tx = await db.transaction(storeName, ‘readwrite’) const store = await tx.objectStore(storeName)

const key = ‘Hello again’ await store.delete(key) await tx.done })()

以前のバージョンのデータベースから移行する

の3番目の(オプションの)パラメーターopenDB()関数は、を含むことができるオブジェクトですupgrade関数バージョン番号が現在インストールされているデータベースのバージョンよりも大きい場合にのみ呼び出されます。その関数本体では、データベースの構造(ストアとインデックス)をアップグレードできます。

const name = 'mydbname'
const version = 1
openDB(name, version, {
  upgrade(db, oldVersion, newVersion, transaction) {
    console.log(oldVersion)
  }
})

このコールバックでは、ユーザーが更新しているバージョンを確認し、それに応じていくつかの操作を実行できます。

この構文を使用して、以前のデータベースバージョンからの移行を実行できます。

(async () => {
  //...
  const dbName = 'mydbname'
  const storeName = 'store0'
  const version = 1

const db = await openDB(dbName, version, { upgrade(db, oldVersion, newVersion, transaction) { switch (oldVersion) { case 0: // no db created before // a store introduced in version 1 db.createObjectStore(‘store1’) case 1: // a new store in version 2 db.createObjectStore(‘store2’, { keyPath: ‘name’ }) } db.createObjectStore(storeName) } }) })()

一意のキー

createObjectStore()あなたが見ることができるようにcase 1データベースのインデックスキーを示す2番目のパラメータを受け入れます。これは、オブジェクトを保存するときに非常に便利です。put()呼び出しには2番目のパラメーターは必要ありませんが、値(オブジェクト)を取得するだけで、キーはその名前のオブジェクトプロパティにマップされます。

インデックスは、後でその特定のキーによって値を取得する方法を提供し、それは一意である必要があります(すべてのアイテムは異なるキーを持っている必要があります)

キーは自動インクリメントに設定できるため、クライアントコードでキーを追跡する必要はありません。

db.createObjectStore('notes', { autoIncrement: true })

値に一意のキーがまだ含まれていない場合(たとえば、名前が関連付けられていない電子メールアドレスを収集する場合)は、自動インクリメントを使用します。

ストアが存在するかどうかを確認します

を呼び出すことで、オブジェクトストアがすでに存在するかどうかを確認できます。objectStoreNames()方法:

const storeName = 'store1'

if (!db.objectStoreNames.contains(storeName)) { db.createObjectStore(storeName) }

IndexedDBからの削除

データベース、オブジェクトストア、およびデータの削除

データベースを削除する

await deleteDB('mydb')

オブジェクトストアを削除する

オブジェクトストアは、データベースを開くときのコールバックでのみ削除できます。そのコールバックは、現在インストールされているバージョンよりも高いバージョンを指定した場合にのみ呼び出されます。

const db = await openDB('dogsdb', 2, {
  upgrade(db, oldVersion, newVersion, transaction) {
    switch (oldVersion) {
      case 0: // no db created before
        // a store introduced in version 1
        db.createObjectStore('store1')
      case 1:
        // delete the old store in version 2, create a new one
        db.deleteObjectStore('store1')
        db.createObjectStore('store2')
    }
  }
})

オブジェクトストアのデータを削除するには、トランザクションを使用します

const key = 232 //a random key

const db = await openDB(/*...*/)
const tx = await db.transaction('store', 'readwrite')
const store = await tx.objectStore('store')
await store.delete(key)
await tx.complete

もっとあります!

これらは単なる基本です。カーソルやより高度なものについては話しませんでした。 IndexedDBにはまだまだありますが、これが有利なスタートを切ることを願っています。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: