使用 HTML5 WebDatabases 的简单 TODO 列表
网络数据库 是新的 在 HTML5 中。 Web 数据库在用户的浏览器中托管和持久化。 通过允许开发人员创建具有丰富查询能力的应用程序 预计将出现一种新型的网络应用程序 具有在线和离线工作的能力。
这个教程也是 可使用 IndexedDB 编写 ，替代离线存储技术。
本文中的示例代码演示了如何创建一个非常简单的 待办事项列表管理器。 这是对某些功能的非常高级的介绍在 HTML5 中可用。
先决条件
此示例使用命名空间来封装数据库逻辑。
var html5rocks = {};
html5rocks.webdb = {};
异步和事务
在您使用 Web 数据库的大多数情况下 支持您将使用 异步 API 。 异步API 是一个非阻塞系统，因此不会获取数据 通过返回值，而是将数据传递到定义的回调函数。
通过 HTML 的 Web 数据库支持是事务性的。 它不是可以在事务外执行 SQL 语句。 有两种类型的事务：读/写事务 （ transaction() ）并阅读 只有交易（ readTransaction() ）。 请注意，读/写将锁定整个数据库。
步骤 1. 打开数据库
数据库需要先打开才能访问。 您需要定义数据库的名称、版本、描述和大小。
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
步骤 2. 创建表
只能通过执行 CREATE TABLE SQL 语句来创建表 在 交易 中。
我们已经定义了一个函数，它将在主体 onload 中创建一个表 事件。 如果该表尚不存在，将创建一个表。 该表名为 todo，有 3 列。
- ID - 递增的顺序 ID 列
- todo - 作为项目正文的文本列
- added_on - 创建待办事项的时间
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
"todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}
步骤 3. 向表中添加数据
我们正在构建一个待办事项列表管理器，因此非常重要 我们能够将待办事项添加到数据库中。
创建一个事务，在事务中插入一个 INSERT 到 todo 表进行。
executeSql 有几个参数，要执行的 SQL 和参数 绑定查询的值。
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
[todoText, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
步骤 4. 从表中选择数据
现在数据在数据库中，您需要一个函数来获取 数据退回。 在 Chrome 中，网络数据库使用标准的 SQLite SELECT 查询。
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
请注意，此示例中使用的所有这些命令 是异步的，因此数据不会从交易中返回 或 executeSql 调用。 结果传递到成功 打回来。
步骤 4a。 从表中呈现数据
从表中获取数据后，loadTodoItems 方法 将被调用。
onSuccess 回调有两个参数。 第一个是 查询的事务，第二个是结果集。 这是 遍历数据相当简单：
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.todo +
" [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" +
row.ID +");\'>Delete</a>]</li>";
}
这个方法调用的效果是todo列表被渲染成 一个名为“todoItems”的 DOM 元素。
步骤 5. 从表中删除数据
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
第 6 步。全部连接起来
当页面加载时，打开数据库并创建表（如果需要）并呈现任何可能已经在数据库中的待办事项。
....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>
<body onload="init();">
因此需要一个将数据从 DOM 中取出的函数， 调用 html5rocks.webdb.addTodo 方法
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}
湘公网安备 43102202000103号