web-dev-qa-db-ja.com

Service WorkerからlocalStorageにアクセスする

サービスワーカーから定期的にAPIを呼び出して、localStorageに保存されているデータを送信したいと思います。このデータは、ユーザーが私のウェブサイトを閲覧したときに生成され、localStorageに保存されます。統計をlocalStorageに保存し、Service Workerを介して定期的に送信することを検討してください。どうすればよいですか？ Service WorkerからlocalStorageにアクセスできず、postMessage APIを使用する必要があることを理解しています。任意の助けをいただければ幸いです。

javascripthtmlservice-workerweb-worker
10
Faiz

WebworkerプロセスからlocalStorage（およびsessionStorage）にアクセスすることはできません。それらの結果はundefinedになりますが、これはセキュリティ上の理由からです。

postMessage()を使用してワーカーの元のコードに戻り、そのコードでデータをlocalStorageに保存する必要があります。

ローカルストレージからデータを保存および取得するには、localStorage.setItem()およびlocalStorage.getItem()を使用する必要があります。

より詳しい情報：

Worker.postMessage（）

Window.localStorage

以下の擬似コードは、それがあなたを始めることを願っています：

 // include your worker
 var myWorker = new Worker('YourWorker.js'),
   data,
   changeData = function() {
     // save data to local storage
     localStorage.setItem('data', (new Date).getTime().toString());
     // get data from local storage
     data = localStorage.getItem('data');
     sendToWorker();
   },
   sendToWorker = function() {
     // send data to your worker
     myWorker.postMessage({
       data: data
     });
   };
 setInterval(changeData, 1000)
10
GibboK

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers は言う

注：localStorageはService Workerキャッシュと同様に機能しますが、同期的であるため、Service Workerでは許可されていません。

注：必要に応じて、IndexedDBをService Worker内でデータストレージに使用できます。

また、ここで少し議論があります： angularでService Workerを使用してローカルストレージにアクセスするにはどうすればよいですか？

1
Alex028502

私はlocalforageというこのパッケージを使用しています。これは、IndexedDBをラップするlocalStorageのようなインターフェースを提供します。 https://github.com/localForage/localForage

次に、それをパブリックディレクトリに配置することでインポートできます。これにより、Webサーバーによってサービスが提供され、サービスワーカー内でself.importScripts('localforage.js');が呼び出されます。

0
Allen