Search code examples
javascriptlocal-storageprogressive-web-appsservice-workerpostmessage

Access localStorage from service worker


I want to periodically call an API from my service worker to send data stored in the localStorage. This data will be produced and saved in localStorage when a user browses my website. Consider it something like saving stats in localStorage and sending it periodically through the service worker. How should I do this? I understand that I can't access localStorage from the service worker and will have to use the postMessage API. Any help would be highly appreciated.


Solution

  • You cannot access localStorage (and also sessionStorage) from a webworker process, they result will be undefined, this is for security reasons.

    You need to use postMessage() back to the Worker's originating code, and have that code store the data in localStorage.

    You should use localStorage.setItem() and localStorage.getItem() to save and get data from local storage.

    More info:

    Worker.postMessage()

    Window.localStorage

    Pseudo code below, hoping it gets you started:

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