从服务工作者访问LocalStorage

Question

我想定期调用我的服务工作者的API，以发送存储在 localstorage 的数据。当用户浏览我的网站时，将在 localstorage 中生成并保存此数据。考虑一下它之类的东西，例如在 localstorage 中保存统计信息，并通过服务工作者定期发送。我应该怎么做？我了解我无法从服务工作者访问 localstorage ，并且必须使用 postmessage api。任何帮助将不胜感激。

Answer 1

您无法从Webworker进程访问LocalStorage（以及SessionStorage），结果将是 undefined ，这是出于安全原因。

您需要使用 postmessage（）回到工人的原始代码，并将该代码存储在LocalStorage中。

您应该使用 localstorage.setItem（）和 localstorage.getItem（）从本地存储中保存并获取数据。

更多信息：

worker.postmessage（）

https://developer.mozilla.org/en/docs/web/api/window/localstorage“ rel =“ noreferrer”> window.localstorage

pseudo code 下面的伪代码，希望您开始：

 // 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 2

广播频道API更容易

几种方式和控制服务工作者，但 localstorage 是不是其中之一。
indexeddb 是，，但这可能是PWA的过度杀伤，一定要保持纤细。

最重要的是，“ noreferrer”>广播频道API 最容易的结果。与上述 postmessage（）一起使用 MessageChannel API 。

这是广播的工作方式

定义了服务工作者和客户的新广播频道。

const channel4Broadcast = new BroadcastChannel('channel4');

发送在工人或客户端中发送的广播消息：

channel4Broadcast.postMessage({key: value});

接收在工人或客户端中的广播消息：

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

Answer 3

我一直在使用此软件包，称为 localforage ，它提供了一个localstorage的接口，该接口包裹在索引中。 https://github.com/localforage/localforage/localforage

然后，您可以通过将其放置在您的公共目录中来导入它，因此由您的Web服务器提供服务，然后致电： self.importscripts（'localforage.js'）; 在您的服务工作者中。

Answer 4

说

注意：LocalStorage的工作方式与服务工作者缓存类似，但它是同步的，因此不允许在服务工作人员中。

注意：如果您需要，则可以在服务工作者内使用索引。

。

另外，这里还有一些讨论：如何使用Angular的服务工作人员访问本地存储？

Answer 5

我本人绊倒这个问题是一个很小的WebApp项目，我考虑了以下解决方案：
当用户在线时，可以立即发送数据。当他离线时，我使用 syncevent.tag 属性将信息从客户端发送到ServiceWorker。像这样：

//offline_page.html (loads only, when user is offline)

button.onclick = function() {
//on click: store new value in localStorage and prepare new value for synchronization
    localStorage.setItem("actual", numberField.value);
    navigator.serviceWorker.ready.then(function(swRegistration) {
        return swRegistration.sync.register('newval:'+numberField.value);
    });
}

//sw.js

self.addEventListener('sync', function(event) {
//let's say everything in front of ':' is the option, everything afterwards is the value
    let option = event.tag.replace(/(.*?)\:.*?$/, "$1");
    let value = event.tag.replace(/.*?\:(.*?)$/, "$1");

    if(option == "newval") {
        event.waitUntil(
            fetch("update.php?newval="+value)
            .then(function(response) {
                console.log(response);
            })
        );
    }
});

update.php 一旦用户上网，就将新值保存到后端。
这不会使服务人员访问LocalStorage，但会给他带来每一个更改。

刚开始习惯这个同步主题。因此，我真的很感兴趣，Wheather这很有帮助，并且其他人对此解决方案的看法。