javascript - 如何通过 HTML 5 javascript 在本地 ipad/iphone 上存储数据并在设备上线时提交它们

Question

场景如下:有一个提问者包含 3 个问题，每个问题有 4 个多个答案。用户将为每个问题选择一个答案，这些数据以隐藏形式存储在标签中，即

<label id=q1>A</label>
<label id=q2>C</label>
<label id=q3>D</label>

现在如果设备连接到互联网，这些数据可以很容易地提交，但如果设备没有互联网，我需要找到一种方法将标签数据存储在用户的设备上，然后下次有连接时，应用程序有一个提交按钮，该按钮将提交所有存储的数据(每次回答提问者时)。

谢谢

Answer 1

我要做的是将数据保存在 localStorage 中(尽管此链接指向 Phonegap Docs，但 localStorage 是一个 Html5 功能，非常有用)并定期调用一个函数来检查是否有要发送的内容。

因此，检查网络连接可用性:

function isOnline(){
    try{
        var status = navigator.network.connection.type;
        var val = (status != 'none' && status != 'unknown');
        return val;
    }catch(err){ console.error('isOnline(): '+err); return false; }
}

包含这些代码行以向 localStorage 添加一些功能，因为它只允许保存字符串，但是通过这两个函数，它也能够存储 JSON 数据:

Storage.prototype.setObject = function(key, value) { 
    this.setItem(key, JSON.stringify(value)); 
}
Storage.prototype.getObject = function(key) { 
    var value = this.getItem(key);
    return value && JSON.parse(value); 
}

在您的表单提交处理程序中，只需检查是否存在连接。如果没有，保存要发送的数据:

if(isOnline()){
    // do stuff
}else{
    var data = // The data to be sent
    var toBeSent = localStorage.getObject('toBeSent') || [];
    toBeSent.push(data);    // It's better to store the data in an array, in case there's more than a questioner to be sent
    localStorage.setObject('toBeSent', toBeSent);
}

然后编写一个检查和发送数据的函数:

function sendPending(){
    var toBeSent = localStorage.getObject('toBeSent') || [];
    var data;
    for(var i in toBeSent){
        data = toBeSent[i];

        // send data
    }
    // Remove the list
    localStorage.removeItem('toBeSent');
}

最后，定期执行函数:

setInterval(sendPending, 60000);  // The system will check every minute if there's something to send