从服务工作者访问localStorage

Question

我想定期从我的服务工作者调用API来发送存储在localStorage中的数据.当用户浏览我的网站时,将生成此数据并将其保存在localStorage中.考虑一下像在localStorage中保存统计信息并定期通过服务工作者发送它.我该怎么做？我知道我无法从服务工作者访问localStorage,并且必须使用postMessage API.任何帮助将受到高度赞赏.

Answer 1

广播频道 API 更简单

客户端和控制 Service Worker 之间进行通信的方式有多种，但不是其中localStorage之一。 是的，但这对于无论如何都应该保持苗条的 PWA 来说可能有点过分了。IndexedDB

在所有方法中，Broadcast Channel API结果最简单。postMessage()到目前为止，它比上面提到的MessageChannel API更容易实现。

这是广播的工作原理

在 Service Worker 和客户端中定义一个新的广播通道。

const channel4Broadcast = new BroadcastChannel('channel4');

要在工作程序或客户端中发送广播消息：

channel4Broadcast.postMessage({key: value});

要在工作程序或客户端中接收广播消息：

channel4Broadcast.onmessage = (event) => {
    value = event.data.key;
}

Answer 2

我一直在使用这个包localforage，它提供了一个类似 localStorage 的接口，它环绕着 IndexedDB。https://github.com/localForage/localForage

然后你可以通过将它放在你的公共目录中来导入它，所以它由你的网络服务器self.importScripts('localforage.js');提供服务，然后在你的服务工作者中调用：。

Answer 3

您无法从webworker进程访问localStorage(以及sessionStorage),结果将是undefined,这是出于安全原因.

您需要使用postMessage()返回Worker的原始代码,并让该代码将数据存储在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)

Answer 4

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers说

注意：localStorage 的工作方式与 Service Worker 缓存类似，但它是同步的，因此在 Service Worker 中不允许。

注意：如果需要，IndexedDB 可以在 Service Worker 内部用于数据存储。

这里还有一些讨论：How do I access the local storage using Service Worker in Angular?