ほとんどすべてのJavaScriptフレームワークが回避する機能があります：ローカルストレージ。今のところ、Angularにもありません。そこで、モジュールを作成しました。

この投稿のフランス語版はこちらから入手できます。

なぜローカルストレージモジュールなのか？

Angularは、Webアプリを構築するための完全なフレームワークであり、必要なすべてのモジュール（コンポーネント、AJAX、ルーティングなど）があります。不足しているのはローカルストレージだけです。

ほぼすべてのアプリ、特にプログレッシブWebアプリ（PWA）は、認証トークンまたはユーザー設定とプロファイルを保存するために、少なくともいくつかのローカルストレージを必要とします。したがって、現時点では2つのオプションしかありません。Ionicなどの追加ツールを使用するか、ネイティブJavaScriptAPIを使用します。それらの2つがあります：

• ローカルストレージ
• IndexedDB

IndexedDB APIは非同期であるため効率的ですが、使用するのは面倒です。大量の古いイベントリスナー（Promisesはまだありません）で動作するため、すぐにコールバック地獄に陥ります。

MozillaはlocalForageで素晴らしい仕事をしました：ネイティブlocalStorageに似た使いやすいAPIですが、IndexedDBを介してデータを非同期的に内部的に保存します。ただし、ES5で記述されているため、Angularで実装するのは困難です。

ここに私たちの来るNGX-PWA /ローカル・ストレージ・モジュール：localForageと同じアイデアは、しかしES6 / ES2015に、とに包まれRxJSの観測他の角度のモジュールとコヒーレントであることを、。

ngx-pwa / local-storageを使い始める

Angular≥6の場合、npm経由でインストールします。

npm install @ngx-pwa/local-storage

LocalStorage API

APIは、RxJS Observablesを介して非同期であることを除いて、ネイティブのlocalStorageAPIに従います。

データの書き込み

エラーが発生する可能性は低いですが、アプリでは常にすべての潜在的なエラーをキャッチする必要があります。

サブスクライブを解除する必要はありません：監視可能な自動完了（Httpサービスのように）。

文字列化を気にせずに、任意の値を格納できます。

1つのアイテムを削除するには：

すべてのアイテムを削除するには：

データの読み取り

アイテムが見つからないことはエラーではなく、成功しますがnullを返します。

したがって、ローカルストレージから削除された可能性があるため、常にデータを確認してください。

サポートと変更ログ

このモジュールは、最新のすべてのブラウザーで機能し、AoTプリコンパイルおよびユニバーサルサーバーレンダリングと互換性があります。

この投稿は単なる紹介であり、Githubで詳細を確認できます。また、ここではコメントをチェックしていませんので、質問や問題がある場合は、Githubでチェックしてください。

同じ著者による

• Visual Studio CodeのAngular回路図拡張機能：AngularCLIコマンドのグラフィックインターフェイス
• typescript-strictly-typed：TypeScriptおよびESLint / TSLintの厳密な構成
• Mediumの他の人気のAngular投稿
• Twitterでフォローしてください
• Angularオンサイトトレーニング（パリを拠点としているため、ウェブサイトはフランス語ですが、私の英語の略歴はこちらで、旅行も可能です）