如何更新服务工作线程、Chrome扩展程序的本地存储？

在服务工作线程中使用Cache API更新本地存储。

示例代码：

在Service Worker中：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        // 如果缓存中已有该请求的响应，直接返回响应
        return response;
      } else {
        // 如果缓存中没有该请求的响应，则发送请求并将响应缓存起来
        return fetch(event.request).then(resp => {
          let responseToCache = resp.clone(); // 因为响应体流只能被消耗一次，所以要克隆一个副本来缓存
          caches.open('my-cache').then(cache => {
            cache.put(event.request, responseToCache); // 将请求和响应缓存起来
          });
          return resp;
        });
      }
    })
  );
});

// 监听 message 事件，接收需要更新本地存储的数据，然后进行更新
self.addEventListener('message', event => {
  if (event.data && event.data.type === 'update-local-storage') {
    // 将更新后的数据存储到本地
    localStorage.setItem('my-data', JSON.stringify(event.data.payload));
    // 更新完成后通知发送消息的页面
    event.ports[0].postMessage({ type: 'update-local-storage-finished' });
  }
});

在Chrome扩展程序中：

// 发送 message 给服务工作线程，请求更新本地存储
chrome.runtime.sendMessage({ type: 'update-local-storage', payload: myData }, resp => {
  console.log('本地存储已更新');
});
// 监听来自服务工作线程的 update-local-storage-finished 消息，表示更新已完成
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'update-local-storage-finished') {
    console.log('本地存储已更新');
  }
});