时间戳

首页 > 解决方案 > 在互联网连接不稳定的客户端中保存表单数据

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

问题描述

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

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

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

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

我对python足够精通敢于这个项目，但对网络技术来说却是新手，所以如果问题的某些部分相当愚蠢，请原谅。在这种情况下，我很高兴被告知......（......提示如何提出更好的问题。）

非常感谢您的帮助。

标签： javascriptpythonbottleformshttp-post

解决方案

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

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

检测请求是否失败

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

如果您不使用 jquery，我想您可以fetch在vanilla javascript中执行类似的操作（单击此处了解更多信息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));

以后如何发回数据？

setTimeout使用javascript中的方法发回数据

不断检查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);

推荐阅读