IndexedDBの簡単で完全なガイドとブラウザーへのデータの保存

JavaScriptの学習に興味がありますか? jshandbook.comで無料の電子ブックを入手

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

IndexedDBは非同期APIです。つまり、コストのかかる操作を実行してもUIスレッドがブロックされず、ユーザーにずさんなエクスペリエンスが提供されます。

無制限の量のデータを保存できますが、特定のしきい値を超えると、ユーザーはサイトにより高い制限を与えるように求められます。

最新のすべてのブラウザでサポートされています。

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

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

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

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

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

サイトごとに複数のデータベースを技術的に作成できますが、通常は1つのデータベースを作成します。そのデータベース内に、複数のオブジェクトストアを作成できます。

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

通常、各ストアには次のような一連のアイテムが含まれています。

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

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

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

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

ES2015でのPromiseの出現と、その後のPromiseの使用へのAPIの移行以来、IndexedDB APIは少し古い学校のようです。

問題はありませんが、説明するすべての例では、Jake ArchibaldのIndexedDB Promiseed Libraryを使用します。

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

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

次を使用してidb libを含めます。

糸はIDBを追加

そして、Webpack、Browserify、またはその他のビルドシステムを使用して、または単に次のいずれかの方法でページに追加します。