フロントエンドはIndexedDBのlocalForageパッケージを保存します

クズども · 掲載地 2023/10/12 20:42:27

一般的なフロントエンドのデータストレージソリューションには主に以下が含まれます:Cookie、Web Storage、IndexedDB、WebSQL、ローカルストレージ、セッションストレージ例えば:

特性	クッキー	localStorage	sessionStorage	indexedDB
データライフサイクル	一般的にサーバーによって生成される有効期限は設定可能です。フロントエンドの導入やjs-cookieなどのコンポーネントも生成可能です	掃除されない限り、常にそこにあります。ブラウザが閉じるとローカルに保存されますが、クロスブラウザはサポートされていません	ページが閉じられても、ページのクリーニングや更新は依然として存在し、クロスページインタラクションはサポートされていません	掃除されない限り、それはずっと存在してきた
データストアのサイズ	4K	5歳男	5歳男	サイズ制限なし
サーバーと通信してください	リクエストされたヘッダーに毎回運ばれ、リクエストのパフォーマンスに影響を与えます。同時に、リクエストに含まれるため、セキュリティ上の問題も起こりやすいです	参加していません	参加していません	参加していません
特異	文字列のキー-値ペアはデータをローカルに保存します	文字列のキー-値ペアはデータをローカルに保存します	文字列のキー-値ペアはデータをローカルに保存します	IndexedDBは非リレーショナルデータベース(SQL文による操作はサポートされていません)。大量のデータを保存し、クエリインターフェースを提供し、他のストレージソリューションでは提供できないインデックスの構築が可能です。

インデックスDBです

本記事では主にフロントエンドストレージにおけるIndexedDBの利用について説明し、以下のように紹介します。

IndexedDBは、クライアント側で大量の構造化データ(ファイルやバイナリの大きなオブジェクト(ブロブ)も含む)を格納するための基盤となるAPIです。 APIはインデックスを使って高性能なデータ検索を可能にします。ウェブストレージは少量のデータ保存には便利ですが、大量の構造化データを保存するほど優れていません。 IndexedDBはこのシナリオに対する解決策を提供します。このページはMDN IndexedDBのメインガイドページです。ここでは、APIの完全な参照と使用ガイド、ブラウザサポートの詳細、そして主要な概念の説明へのリンクを提供しています。

IndexedDBには以下の機能があります:

(1) キー-値ペアの記憶。 IndexedDBはオブジェクトストアを使ってデータを保存します。 JavaScriptオブジェクトを含むあらゆる種類のデータが直接登録可能です。オブジェクトリポジトリでは、データは「キー-値ペア」の形で保存され、各データレコードには対応する主キーが割り当てられています。これは一意で重複できません。重複するとエラーが発生します。

(2) 非同期。 IndexedDBはブラウザをロックせず、ユーザーは他の操作も行えます。これは同期的に動作するLocalStorageとは対照的です。非同期設計は大量のデータの読み書きを防ぎ、ウェブページのパフォーマンスを遅くすることを目的としています。

(3) 支援。 IndexedDBはトランザクションをサポートしており、操作ステップのいずれかが失敗した場合、トランザクション全体がキャンセルされ、データベースはトランザクション発生前の状態にロールバックされます。また、データの一部だけを書き換える必要はなくなります。

(4) ホモロジー制限。 IndexedDBも同じオリジン制限の対象であり、各データベースはそれを作成したドメイン名に対応しています。ウェブページは自分のドメイン名でしかアクセスできず、クロスドメインデータベースにはアクセスできません。

(5) 大きな収納スペース。 IndexedDBはLocalStorageよりもはるかに大きなストレージ容量を持ち、一般的に250MB以上、上限はありません。

(6) バイナリストレージのサポート。 IndexedDBは文字列だけでなく、バイナリデータ(ArrayBufferオブジェクトやBlobオブジェクト)も保存できます。

IndexedDBを直接使い始めるのが難しく、自分でカプセル化する必要がある場合は、以下のようなパッケージパッケージを使うことができます。

localForage:クライアント側のデータストアにシンプルな値構文を提供するシンプルなポリフィルです。バックグラウンドでIndexedDBを使用し、IndexedDBをサポートしないブラウザではWebSQLやlocalStorageにフォールバックします。
Dexie.js: IndexedDBのラッパーはシンプルな構文によりコード開発を高速化させます。
ZangoDB:MongoDBに似たIndexedDBインターフェースで、MongoDBのよく知られたフィルタリング、投影、ソート、更新、集約機能の多くをサポートします。
JsStore:SQL構文を用いたIndexedDBラッパーです。
MiniMongo:クライアントメモリ内のMongoDB、ローカルストレージ、httpによるサーバー同期。 MeteorJSはMiniMongoを使っています。
PouchDB:ブラウザ上でIndexedDBを使ってCouchDBを実装するクライアントです。
idb:IndexedDBに似たAPIの大部分を持ちながら、データベースの使いやすさを大幅に向上させる小さな改良を加えた、小さく(〜1.15k)のライブラリです。
idb-keyval:IndexedDBで実装された超シンプルで小型(約600B)の約束ベースのキーバリューペアストレージ。
sifrr-storage:非常に小さな(~2kB)の約束ベースのクライアントサイドキー・バリューデータベースです。 IndexedDB、localStorage、WebSQL、クッキーに基づいて実装されています。上記の対応データベースを自動的に選択し、優先順位で使用することができます。
lovefield:LovefieldはJavaScriptで書かれたWebアプリのリレーショナルデータベースで、さまざまなブラウザ環境で動作可能で、高速で安全かつ使いやすいSQLに似たAPIを提供します。

localForage

localForageは高速でシンプルなJavaScriptリポジトリです。 localForageは非同期ストレージ(IndexedDBまたはWebSQL)とlocalStorageに似たシンプルなAPIを使用することで、ウェブアプリケーションのオフライン体験を向上させます。 localForageは、IndexedDBやWebSQLをサポートしていないブラウザでlocalStorageを使用します。

GitHubアドレス:ハイパーリンクのログインが見えます。
中国語チュートリアル:ハイパーリンクのログインが見えます。

localForageは2つの異なるjsファイルを提供しており、その違いは以下の通りです:

localforage.js: 嘘実装を含む約束ライブラリ(ハイパーリンクのログインが見えます。ファイルは比較的大きく、Promiseの構文は古いブラウザでも使用可能です。
localforage.nopromises.js: Promiseの実装はなく、新しいバージョンのブラウザのみがサポートされています。

テストコード:

ログインが見えます。

(終わり)

クズども · 掲載地 2025/03/02 19:12:18

軽量IndexedDBによって実装された超シンプルな約束ベースのキーヴァルストレージ:https://github.com/jakearchibald/idb-keyval

[その他] フロントエンドはIndexedDBのlocalForageパッケージを保存します

関連記事

閲覧したセクション