LocalStorageにデータを保存することは有用ですが、複数のデバイスまたはブラウザで共有する必要があるデータを保存する場合、それは良いソリューションではありません。
たとえば、製品にサインアップするすべての新しいユーザーに歓迎のモーダルを見せたいとしましょう。 LocalStorageを使用して、ユーザーがすでにこのモーダルを見ているかどうかを追跡する場合、ユーザーはデバイスまたはブラウザを切り替えるたびに何度も何度もエクスペリエンスを取得し続けます。
それがリモートストラージの出番です。LocalStorageと同じAPIを使用すると、リモートストラージを使用すると、ブラウザーやデバイス全体で状態を維持しながら、より良いユーザーエクスペリエンスを提供するために、その場でデータを簡単に読み書きできます。
お気に入りのパッケージマネージャーを使用してライブラリをインストールします。
npm install remote-storageまたは、単にHTMLに含めるだけです。
< script src =" https://unpkg.com/remote-storage@latest/dist/remote-storage.min.js " sync > </ script >ライブラリをインポートし、localStorageのように使用します。
import { RemoteStorage } from 'remote-storage'
const remoteStorage = new RemoteStorage ( { userId : "my-user-id" } )
const hasSeenNewFeature = await remoteStorage . getItem ( 'hasSeenNewFeature' )
if ( ! hasSeenNewFeature ) {
await remoteStorage . setItem ( 'hasSeenNewFeature' , true )
// Highlight your new and exciting feature!
}それでおしまい！
Remotestorageは、ユーザーIDを使用してユーザーを識別します。ユーザーIDは、ユーザーを一意に識別する文字列です。それはあなたが望むものなら何でもありますが、私たちはユーザーが他のユーザーIDを推測してデータにアクセスするのを防ぐために、認められないUUIDを使用することをお勧めします。
リモートストラージの新しいインスタンスを作成すると、ユーザーIDが設定されます。
const remoteStorage = new RemoteStorage ( {
userId : '123e4567-e89b-12d3-a456-426614174000'
} )ユーザーIDを提供しない場合、Remotestorageは、ユーザーがサイトにアクセスするたびに変更されるランダムUUIDを生成します。これはテストに役立ちますが、データがデバイスやブラウザー間で持続しないため、リモートストレージの目的を打ち負かします。
RemotestorageはインスタンスIDを使用して、リクエストを行っているアプリケーションインスタンスを識別します。インスタンスIDは、アプリケーションインスタンスを一意に識別する文字列です。通常、同じアプリケーションインスタンスからのすべてのリクエストに対して同じインスタンスIDを使用します。
インスタンスIDは、Remotestorageの新しいインスタンスを作成するときに設定されます。
const remoteStorage = new RemoteStorage ( {
userId : '123e4567-e89b-12d3-a456-426614174000' ,
instanceId : 'my-cool-app'
} )https://api.remote.storage （ serverAddressが提供されていない場合はデフォルトの動作）で無料のホストコミュニティサーバーを提供します。このホストされたサーバーは、生産アプリに使用するべきではありませんが、テストやプロトタイプに最適です。
別のサーバーを使用するには、Remotestorageの新しいインスタンスを作成するときにserverAddressオプションを渡すだけです。
const remoteStorage = new RemoteStorage ( {
serverAddress : 'https://api.remote.storage' ,
userId : '123e4567-e89b-12d3-a456-426614174000' ,
instanceId : 'my-cool-app'
} )サーバーは、数分でDockerを使用してスピンアップできます。詳細については、サーバーのドキュメントを参照してください。
リモートストレージは、非感受性データにのみ使用する必要があります。ユーザーの好み、設定、その他の非感受性データなどに使用することをお勧めします。 Public APIの性質により、パスワードやPIIなどの機密データを保存するのに適していません。
LocalStorageは、ブラウザにデータを保存できるブラウザAPIです。データはユーザーのデバイスにローカルに保存されており、デバイスやブラウザ間で共有されていません。 Remotestorageは、LocalStorage APIとリモートサーバーを組み合わせて、ブラウザーとデバイス全体でデータを保持するライブラリです。
Remotestorageは認証なしで使用できますが、JSON Web Tokens（JWT）を使用してリクエストをサーバーに認証することを強くお勧めします。これは、サーバーのJWT SecretにJWT_SECRET環境変数を.envに設定することで実行できます。詳細については、サーバーのドキュメントを参照してください。
プルリクエストはいつでも大歓迎です。劇的な変更を提案する場合は、最初に議論のために問題を開くようにしてください。これにより、作業を開始する前にPRが受け入れられることが保証されます。
まだ割り当てられた貢献者がない既存の問題については、問題に取り組みたい場合は、この問題についてお気軽にコメントしてください。あなたが良いフィットだと思うなら、私たちはあなたに問題を割り当てます。
変更を加える：バグの修正または機能を実装し、テストを書き込み、それをカバーし、すべてのテストが渡されていることを確認します。コミットレバレッジセマンティックコミットメッセージと、コミットメッセージが従来のコミット形式に従うことを確認してください。次に、メインブランチにプルリクエストを開きます。
