indexeddbの設定方法

月21日更新
ルック!あれは何ですか.飛行機ですか.それはLocalStorageですか?
いいえ、構造化されたデータの多くのクライアント側のストレージのための不必要に複雑な低レベルAPIです.
エニグマのコードのこの現代版をクラックする能力があるかもしれないので、即座に彼らのプロジェクトにそれを実装する方法を理解している人に会いたいです.
哀れな冗談私は学校のプロジェクトのためのデータを格納するこのクールな方法を使用する必要があり、どのように私がそれを作ったかを文書化することを決めた.私の将来の自己のために、また、他の不満を持って開発者は、彼らのゴムアヒルで叫んで答えを与えていない.
非常に明確にするために、私はAPIの背後に何が起こっているのかほとんどわかっていませんが、単純に私が個人的にそれをどのように働かせるのか、そして、あなたはどのように将来のthorも必要であるかもしれません.
そう!始めましょう.
indexeddbは、通常のSQLベースのリレーショナルデータベースではありませんが、JavaScriptベースのオブジェクト指向のものの多くです.これまでのデータのこのタイプを見た?key: "value"それは私たちが働いていることであり、それは私が構築していた映画PWAのような単純なアプリケーションに最適です.
このAPIはイベントによって動作しますが、その代わりにJake Archibaldの' indexedDB Preparated Library 'をインストールすることをお勧めします.あなたはそれを推測した.約束する.

免責事項

Googleのいずれかのような多くのチュートリアルでは、ライブラリの古いバージョンを使用し、それに従う場合は動作しません.私がどのようにそれを考え出したかについて、私に尋ねてください.
indexeddbがどのように動作するかを理解するには、まずデータを扱う方法を知る必要があります.
何かを行う前に、データベースを開く必要があります.私は引用符でそれを入れています、あなたが実際にそれを作成するためにそれを『開く』ために必要とするので、あなたは同時に両方ともすることが親切です.
おそらく、オンラインチュートリアルでインポートされるのを見る方法は次のようになります.

import idb from 'idb';

閉じるこの動画はお気に入りから削除されていますidb.open()しかし、モジュールになってから、代わりにこのようにインポートする必要があります.

import { openDB } from 'idb';

最高水準

プロセス全体を開始するには、実際のデータベースを開きます.
そのため、どこかにasync関数を作成し、この内部に書き込みます.

async function myDatabase() {
   const db = await openDB('Database_name', 1, {

   });
}

これはデータベースの最高レベルです.
あなたができるだけ多くを作成することができますが、通常1つだけのアプリごとに1つです.

オブジェクトストア

これは、我々のデータを格納するつもりであるバケツの1つです、それは伝統的な関係データベースのテーブルのようです.

const db = await openDB('Database_name', 1, {
   upgrade(db) {
     const store = db.createObjectStore('name_of_store', {
        keyPath: "id_of_the_thing"
     });
   }
});

我々にはupgrade データベースのこのバージョンが以前に開かれなかったならば、それはそうしません.私は考えません.
INDEXEDDBの方法が全く奇妙に命名されていて、プロジェクトでそれを必要としないからです.しかし、私のものを壊さないために、私は今それを保っています.
その中で、我々は、バケット、またはテーブルとも呼ばれるストアを作成している.さて、それは我々が我々のデータを格納する場所です.ハ.
プロジェクトが壊れた場合、またはランダムなIDを必要とする場合は、次のように自動インクリメントを追加します.

const store = db.createObjectStore('name_of_store', {
   keyPath: "id_of_the_thing",
   autoIncrement: true
});

テスト時間！

async関数を呼び出すときはいつでも、あなたのブラウザのdevツールにインデックスを付けてください.あなたは、右側のLocalStorageの横にあるアプリケーションのタブでそれを見つけることができます.

クール.私たちは、データベースを持っている/バケット/テーブルは、我々のものを受信する準備が整いました.
我々の最初のアイテムを店に加えるためにasync function , のように書きます.

await db.add('name_of_store', {
   apple: "delicious"
});

ブラウザで

我々は最初のデータを持っている!
でも.どのように戻ってあなたが求めるものを得るのですか?

var myThing = await db.get('name_of_store', 1)

1は店のアップルのIDです.自動インクリメントされたものの代わりに特定の何かであると指定するならば、もちろん、代わりにそれを使用してください.
変数myThing 今すぐオブジェクトを使用する準備ができている!

フルコード

async function myDatabase() {
   // It's a good idea to have this error handling just in case
   if (!('indexedDB' in window)) {
      console.log('This browser doesn\'t support IndexedDB');
      return;
   }

   const db = await openDB('Database_name', 1, {
      upgrade(db) {
        const store = db.createObjectStore('name_of_store', {
           keyPath: "id_of_the_thing",
           autoIncrement: true
        });
      }
   });

   await db.add('name_of_store', {
      apple: "delicious"
   });

   var myThing = await db.get('name_of_store', 1);

   console.log(myThing);
}

そのような種類のこの簡単なセットアップを終了します.
これは、すべてのこのようなオンラインで見つけることができるほとんどの助けを信じていないので、うまくいけば、これは将来的に自分自身を助けるだろうし、おそらくいくつかの失われた魂もそれにつまずくでしょう.
使用することができます他の機能の負荷が、私はその権利を取得しません.
あなたはJake ArchibaldのライブラリReadMeのより多くの例を見つけることができます.
https://github.com/jakearchibald/idb