[翻訳]クロスストレージ:ドメイン間でローカルデータを利用可能にする

画像

知っているように、 localStorage APIにはいくつかの制限があり、大きなアプリケーションを作成する場合は回避する必要があります。 新しいクロスストレージ *ライブラリは、権限を使用してlocalStorageの クロスドメインサポートを有効にします 。 このライブラリには、 ES6標準のPromise APIも含まれています

クロスストレージは、ハブとクライアントの2つのコンポーネントを使用します。 ハブはドメインに応じて許可を設定できますが、これは同じソースの原則を強制的に使用することに他なりません。 指定されたライブラリには、読み取り、書き込み、削除などのアクセスタイプ( get, set, del )が含まれます。

 CrossStorageHub.init([ { origin: /\.example.com$/, allow: ['get'] }, { origin: /:(www\.)?example.com$/, allow: ['get', 'set', 'del'] } ]); 

クライアントは、次のようにハブにアクセスできます。

 var storage = new CrossStorageClient('https://store.example.com/hub.html'); storage.onConnect().then(function() { // Set a key with a TTL of 90 seconds return storage.set('newKey', 'foobar', 90000); }).then(function() { return storage.get('existingKey', 'newKey'); }).then(function(res) { console.log(res.length); // 2 }).catch(function(err) { // Handle error }); 

onConnectメソッドは、ハブへの接続が確立されたときに満たされるpromiseを返すことに注意してください。 接続の最後にstorage.closeを呼び出すこともできますstorage.closeこれはiframeを使用して実装されます。

ダニエルは、古いブラウザーにはes6 -promise polyfileを使用することをお勧めします。

このプロジェクトはGulpを使用してクライアントコードを構築し、 zuulテストもバンドルしてます。

タグ付け

*クロスストレージライブラリ、ライセンス:Apache 2.0、npm: クロスストレージ 、bower: cross-storage 、著者:Daniel St. ジュール

Source: https://habr.com/ru/post/J236223/


All Articles