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

【问题标题】：How to store a list of querys and send them to mySQL when online?在线时如何存储查询列表并将它们发送到mySQL？
【发布时间】：2021-02-10 12:35:58
【问题描述】：

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

现在我想构建一个 HTML FORM，用户填写的内容将在用户离线时保存到缓存中。但在用户在线时直接发送到 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”..

【问题讨论】：

标签： service-worker browser-cache service-worker-events

【解决方案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));

【讨论】：