Fatal编程技术网

Javascript navigator.onLine

javascript html

Javascript navigator.onLine,javascript,html,Javascript,Html,我正在玩在上找到的不完整示例 但我很难过看到里面有这样的评论： "renders the note somewhere", and "report error", and "// …" 那么，有人能帮我写一个有效的例子吗？以下是到目前为止我得到的信息： <!DOCTYPE HTML> <html manifest="cache-manifest"> <head> <script> var db = openDatabase("notes", ""

我正在玩在上找到的不完整示例

但我很难过看到里面有这样的评论：

"renders the note somewhere", and
"report error", and
"// …"
那么，有人能帮我写一个有效的例子吗？以下是到目前为止我得到的信息：

<!DOCTYPE HTML>
<html manifest="cache-manifest">
<head>
<script>
var db = openDatabase("notes", "", "The Example Notes App!", 1048576);

function renderNote(row) {
  // renders the note somewhere
}
function reportError(source, message) {
  // report error
}

function renderNotes() {
  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)',
      []);
    tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        renderNote(rs.rows[i]);
      }
    });
  });
}

function insertNote(title, text) {
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
      function(tx, rs) {
        // …
      },
      function(tx, error) {
        reportError('sql', error.message);
      });
  });
}


</script>
<style>
label {
    display:block;
}
</style>
</head>
<body>
<form>
<label for="mytitle">Title:</label>
<input name="mytitle">
<label for="mytext">Text:</label>
<textarea name="mytext"></textarea>
<!-- There is no submit button because I want to save the info on every keystroke -->
</form>
</body>
</html>
但是我也不确定我会把它和什么联系起来。

如果navigator.online可以将本地数据库与在线存储库同步，那么您可能不需要“else”，因为您已经在本地存储了。不过，最好是为“脱机”和“联机”事件添加EventListener（在窗口对象上），并使用这些事件触发（和取消）同步

查看联机/脱机状态处理的示例，并查看（联机时不同步）

在我看来，您是在追求类似于

function save() {
    if (navigator.onLine) {
       // Send data using XMLHttpRequest
    } else {
       // Queue data locally to send later
    }
}

<textarea name="mytext" onkeyup="save();"></textarea>
这是我能从规范目前所说的内容中得出的最好结果——但是，请注意，规范目前还不完整，您还无法在w3站点上找到它的最终版本

如果您对如何在本地将数据排队感到好奇，那么即使是数组也应该这样做。将每个本地请求推送到阵列的末尾（可能同时将其保存在本地），并定期检查是否存在活动的internet连接。如果internet连接可用，则重复从阵列中弹出顶部元素并通过网络发送，直到阵列为空。

我建议不要每次击键时都保存到DB。使用setTimeout在用户暂停键入后n秒触发保存。否则，网络延迟将使键入成为一场噩梦。对于我自己，我会为每个输入将保存放到onblur处理程序中。感谢Robusto的评论。hacks.mozilla页面只会使用清单文件进行详细说明，而不是用于脱机存储的完整sql数据库。事实上，它使用localstorage来存储本地日期，而不是像firefox那样使用webdb（local sql db），而且可能永远不会（参见）支持webdb。 
function save() {
    if (navigator.onLine) {
       // Send data using XMLHttpRequest
    } else {
       // Queue data locally to send later
    }
}

<textarea name="mytext" onkeyup="save();"></textarea>

function renderNote(row) {
    $('notes').innerHtml = $('notes').innerHtml + row.body;
}