javascript - 导航器.onLine

标签 javascript html

我正在玩在 http://www.w3.org/TR/offline-webapps/ 中找到的不完整示例

但是看到里面的评论我很心疼:

"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>

我也知道我必须将其合并到某处:

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

但我什至不确定我会把它绑起来。

最佳答案

在我看来你正在寻找类似的东西

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

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

但是,使用像 Robusto 提到的超时(我认为这也是 GMail 做事的方式)。

如果您担心的是“在某处渲染注释”等,那部分由您填写。您必须通过从数据库中选择数据,然后将其填写到页面上的元素。

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

这是我根据规范目前所说的最好的结果 - 但是请注意,该规范目前还不完整,您还不能在 w3 网站上找到它的最终版本。

如果您对如何在本地排队数据感到好奇,即使是数组也可以做到这一点。将每个本地请求推送到数组的末尾(并可能同时将其保存在本地)并定期检查事件的互联网连接。如果互联网连接可用,重复从数组中弹出顶部元素并通过网络发送它,直到数组为空。

关于javascript - 导航器.onLine,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2328565/

相关文章:

javascript - 当它的父级被创建为.empty() 时,如何获取从 DOM 中删除的 div?

css - 具有填充所有可用空间的中心元素的 Flex-box

html - 100% 高度,带边距和动态内容

javascript - 是否可以编辑 svg :image styles in the browser?(使用 D3)

javascript - jQuery 日期选择器 : Multiple input giving an error

javascript - 为什么 setTimeout 计时器会触发两次?

javascript - 捕获模板文字内的正则表达式组作为函数参数

javascript - ReactJS、Redux 和 DexieJS (IndexedDB) - 隐身模式和 Chrome v69 中的错误

java - JSP 联系表 - 将其发送到 Gmail

java - Selenium java 。将文本放入 div 元素 : element not interactable