簡単な非同期ブラウザストレージのためにlocalForageを使用する方法

投稿日: 2022-04-20 2022-04-20
タグ: javascript

localForage は、ブラウザーデータベースの大まかな状況をスムーズにする便利なラッパーライブラリです。そのうちのいくつかがあります：

ローカルストレージ
IndexedDB
およびWebSQL

これらの各オプションは、当初は同じ目的で設計されました。つまり、ブラウザに永続ストレージを提供することです。現実には、各オプションには固有の長所と制限があり、ブラウザでの単純なデータベースタスクにドキュメントの読み取りに数時間かかる可能性があります。

localForageをインストールするには、次のコマンドを実行します：$ npm install localforage

localForageを使用する利点

localForage は、 localStorage を模倣するシンプルなAPIを提供すると同時に、他の堅牢なデータベースの他の強力な機能（IndexedDBが提供する blobs を格納する機能など）を提供することで、この問題を解決します。。

以下では、localForageを使用するときに得られるいくつかの利点と、いくつかの使用例について説明します。

localStorageAPIを模倣します

localStorage をご存知の場合は、localForageのAPIを既にご存知です。

import localForage from 'localforage';
const foo = 'hello world';

// Setting...
localStorage.setItem('myuniquekey', foo);
localForage.setItem('myuniquekey', foo);

// Getting...
localStorage.getItem('myuniquekey');   //=> 'hello world'
localForage.getItem('myuniquekey');    //=> 'hello world'

removeItem()、clear()、keys()、length()などのlocalStorage メソッドの多くは、localForageで使用できます。これにより、Web開発者はほとんど簡単に作業を開始できます。

シリアル化する必要はありません

おそらく、localForageを使用する最大の利点の1つは、値をシリアル化する必要がないことです。

const foo = {
  greeting: 'hello world'
};

localStorage.setItem('myuniquekey', JSON.stringify(foo));
JSON.parse(localStorage.getItem('myuniqekey'));
//=> {
//     greeting: 'hello world'
//   };

localForage.setItem('myuniquekey', foo); // 🤯
localForage.getItem('myuniquekey');
//=> {
//     greeting: 'hello world'
//   };

localForage を使用した値の保存は、localStorageよりもシームレスに感じられます。これは、配列、数値、ファイルなどなどのさまざまな値で機能し、値のシリアル化の問題をスキップできます。 😅

localForageは非同期です

localStorageは同期しています。これは、短い文字列や数値などの小さな値の場合はそれほど悪くありませんが、文字列化する必要があるため、大きな配列/オブジェクトを操作する必要がある場合は非常に遅くなります。

localForage は完全に非同期であり、コールバックまたは ES6Promiseインターフェースを提供します。これにより、スレッドがブロックされないため、どの同期ライブラリよりもパフォーマンスが向上します。

const foo = {
  greeting: 'hello world'
};

// ES6 Promise
localForage.setItem('myuniquekey', foo)
  .then((value) => {})    // do something with "foo"
  .catch((error) => {});  // handle errors

// Callback
localForage.setItem('myuniquekey', foo, (error, value) => {});

コールバックまたはPromiseインターフェースのどちらかを選択できるのはちょっといいことです！

優雅な劣化

デフォルトでは、localForageはこれらのデータベースを（この特定の順序で）使用することを好みます。

IndexedDB
WebSQL
ローカルストレージ

そのデータベースが利用できない場合は、正常に機能が低下します。たとえば、WebSQLはFirefoxデスクトップでは使用できないため、代わりにlocalStorageに劣化します。これは、ユーザー側で何もしなくても自動的に行われます。 🆒

ただし、フォールバックデータベースの順序を変更する場合は、setDriver()またはconfig()の方法を使用できます。

import localForage from 'localforage';

// Using setDriver()
localForage.setDriver([
  localForage.INDEXEDDB,
  localForage.LOCALSTORAGE,
  localForage.WEBSQL,
]);

// Using config()
localForage.config({
  driver: [
    localForage.INDEXEDDB,
    localForage.LOCALSTORAGE,
    localForage.WEBSQL,
  ],
  name: 'myApp',     // These fields
  version: 1.0,      // are totally optional
});

localForageが使用する専用データベースを提供する場合は、配列の代わりに単一の値を渡します。

localForage.setDriver(localForage.LOCALSTORAGE);

setDriver()メソッドとconfig()メソッドの両方を、localForageを使用してデータベースと対話する前に配置する必要があることに注意してください。

まとめ

localForageは、使いやすく強力なブラウザストレージライブラリです。これはMozillaのサポートを受けて開発され、非常に手入れが行き届いています。 localForageがどのように機能するかについての詳細は、ドキュメントのウェブサイトにアクセスしてください🤓

getdocs

13036