如何存储查询列表并在在线时将它们发送到 mySQL？

Question

我正在尝试构建一个可以离线工作的网络应用程序。
我找到了 JS Service worker，现在我已经在我的应用程序中实现它来存储一些静态页面。

现在我想构建一个 HTML 表单，用户可以在其中填写内容，如果用户离线，这些内容将保存到缓存中..但直接发送到 mysql 当用户在线。

它就像一个列表，其中包含用户上线时将执行的查询。

如何将查询字符串保存到缓存中，然后检查是否在线并使用 Ajax 发送？至 php 和 mySQL.

首先，如何将查询字符串保存到缓存？
第二..我如何找到在线时间，然后从缓存中获取查询字符串？

这就是我用来缓存页面的内容：

importScripts('cache-polyfill.js');

self.addEventListener('install', function(e) {
e.waitUntil(
  caches.open('offlineList').then(function(cache) {
    return cache.addAll([
      '/app/offline_content/'
    ]);
  })
);
});

self.addEventListener('fetch', function(event) {
console.log(event.request.url);

event.respondWith(
  caches.match(event.request).then(function(response) {
    return response || fetch(event.request);
  })
);
});

编辑

我正在阅读 HTML/JS“localStorage”..

Answer 1

好吧，我通过向 localStorage 添加数据解决了这个问题：

//ADD DATA 
localStorage.setItem(key, JSON.stringify(value));

然后我检查互联网连接：

//CHECK INTERNET CONNECTION
const checkOnlineStatus = async () => { //console.log('CHECKING INTERNET..');
    try {
      const online = await fetch("/img.gif");
      return online.status >= 200 && online.status < 300; // either true or false
    } catch (err) {
      return false; // definitely offline
    }
};

const result = await checkOnlineStatus();
result ? updateMysql() : console.log('NO INTERNET..');

在 updateMysql() 函数中，我加载所有 localStorage 并将其与 ajax 一起发送到 php 和 mySQL.

var query = JSON.parse(localStorage.getItem(key));

如何存储查询列表并在在线时将它们发送到 mySQL？

How to store a list of querys and send them to mySQL when online?

service-worker

browser-cache

service-worker-events