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

Question

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

现在我必须重写这个软件，以便它可以在移动设备上使用，服务器在互联网的某个地方。进行数据输入的环境可能会导致互联网连接不稳定或丢失。因此，我必须为首先加载包含表单的网站（例如，在办公室通过 WLAN），然后进行数据输入（在“字段”中）和在数据输入期间，互联网连接丢失的情况做出规定，这样将数据保存到服务器将不起作用。在这种情况下，如果能够在本地保存表单数据，以便稍后发送后请求，​​那就太好了。 （在可能之前，可能无法一直保持网站打开。电池电量不足时，我会遇到问题。）

可能我不是第一个遇到这个问题的人，所以我的问题是：对于在客户端缓冲表单数据的任务是否有“标准”（或经过良好测试）解决方案，以应对后请求时的情况没有得到答复，并在以后发送相同的请求？如果没有，你将如何解决这个问题？特别是，我看到了以下（子）问题：

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

我对 python 足够精通，可以进行这个项目，但对 Web 技术比较陌生，所以如果问题的某些部分相当愚蠢，请原谅。在这种情况下，我很高兴被告知...（...提示如何提出更好的问题。）

非常感谢您的帮助。

Answer 1

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

---

如何检测（在客户端）发布请求失败？可能需要在 javascript 中使用某种超时机制，但是如何使用呢？

检测请求是否失败

1. 仅当您收到数据并保存到后端时才发送状态码 200！
2. 如果有错误，不要发送 200！ （使用错误状态码，如 5xx 或 4xx）
3. jquery 中有一个timeout 选项，如果需要超过给定的时间才能完成请求，则可以取消该请求
4. 失败时，将数据保存到本地存储

如果你不使用 jquery，我想你可以在 vanilla 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的key中是否有数据。如果有任何发送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);