在互联网连接不稳定的情况下，将表单数据保存在客户端中

Question

我有一个用python编写的开源软件，该软件使用bottle Web服务器在Web浏览器中显示表单。表单数据通过“方法=发布”发送到Web服务器。到目前为止，服务器进程与浏览器在同一（PC）主机上运行，​​因此Internet连接没有问题。

现在，我必须重写此软件，以便它可以在移动设备上使用，并且服务器位于Internet上。进行数据输入的环境将可能导致互联网连接不稳定或丢失。因此，我必须为以下情况做好准备：首先加载包含表单的网站（例如，通过WLAN在办公室），然后进行数据输入（在“字段”中），并且在数据输入过程中，互联网连接丢失，这样就无法将数据保存到服务器。在这种情况下，能够在本地保存表单数据非常好，以便以后发送后期请求。 （可能无法一直保持网站打开状态，直到出现这种情况。最新的情况是电池电量不足，我会遇到问题。）

可能我不是第一个遇到此问题的人，所以我的问题是：是否有一种“标准”（或经过良好测试）的解决方案，用于任务在后请求时在客户端缓存表单数据无法回答，以后再发送相同的请求？如果没有，您将如何解决该问题？特别是，我看到以下（子）问题：

1. 如何检测（在客户端）发布请求失败？可能必须使用javascript中的某种超时机制，但是如何？
2. 如何保存数据？我的第一个想法是使用javascript将数据保存到cookie。我在这里忽略了什么吗？
3. 如何稍后再发送数据？

我足够精通python来敢于从事这个项目，但是对于Web技术来说还是一个新手，所以如果问题的某些部分相当愚蠢，请原谅。在这种情况下，非常感谢您告诉我...（...关于如何提出更好的问题的提示。）

非常感谢您的帮助。

Answer 1

我将根据（子）问题尝试回答：

---

  

如何（在客户端）检测到发帖请求失败？可能必须使用javascript中的某种超时机制，但是如何？

要检测请求是否失败

1. 如果您接收到数据并将其保存到后端，则仅发送状态码200！
2. 如果有错误，请勿发送200！ （使用错误状态代码，例如5xx或4xx）
3. jquery中有一个timeout选项，如果完成请求的时间超过给定的时间，则会取消该请求
4. 失败时，将数据保存到localStorage

如果您不使用jquery，我想您可以在原始javascript 中使用fetch做类似的事情（单击here了解有关fetch的更多信息）

$.ajax({
    timeout: 3000 // sets timeout to 3 seconds
}).done(function () {
    console.log("success");
}).fail(function () {
    console.log("error");
    var _local = localStorage.getItem('data-saved'); //get localStorage data
    _local.push({"key": "value"}) // Append JSON based Form data
    localStorage.setItem('data-saved', JSON.stringify(_local)); // Update localStorage
});

---

  

如何保存数据？我的第一个想法是使用javascript将数据保存到cookie。我在这里忽略了什么吗？

使用localStorage

保存数据

在LocalStorage中，您无法存储JSON，但是可以使用JSON.stringify保存并使用JSON.parse进行加载

// Get data
var get_local_data = JSON.parse(localStorage.getItem('data-saved'));
// Update Data
get_local_data.append({"Name": "value", "age": 10})
// Update localStorage
localStorage.setItem('data-saved', JSON.stringify(get_local_data));

---

  

以后如何发送数据？

使用JavaScript中的setTimeout方法发送回数据

连续检查localStorage的密钥中是否有任何数据。如果有的话，向后端发送ajax请求！

// Run in each 5 Sec
setTimeout(function () {
    // Check if we have any failed data
    var get_local_data = JSON.parse(localStorage.getItem('data-saved'));
    if(get_local_data.length > 0){
        //Make a ajax request
        //Update localStorage if success (You need to remove the data from the localStorage), 
        //Ignored failed case
    }    
}, 5000);