一个使用HTML5 WebDatabases的简单例子
2010年11月18日,W3C宣布Web SQL数据库是一个过时的规范。这是web开发人员建议不再使用的技术作为有效的规范将收到任何新的更新和浏览器厂商并不鼓励支持这种技术。许多主流浏览器包括Chrome、Safari、Opera和几乎所有基于Webkit的移动设备支持WebSQL并且在未来的一定时间内继续保持对这个的支持。
简介
在HTML5 Web数据库是新的。Web数据库托管并保存在用户的浏览器上。通过允许开发人员创建应用程序与丰富的查询能力。也许,新一代的web应用程序会出现在线和离线工作的能力。
本教程使用“IndexedDB”,不过你也可以用 localstorage离线存储技术代替它。
本文中的示例代码演示了如何创建一个非常简单的todo列表管理器。这是一个非常高水平的HTML5的一些特性。
准备
定义变量
var webdb = {};异步 和 事务处理
在大多数情况下你在使用Web数据库时都支持您将使用异步API。异步API是一个非阻塞的系统，因此通过返回值不会得到数据,而是将数据交付给一个定义的回调函数。
通过HTML Web数据库支持是事务性的。外面是不可能执行的SQL语句的事务。有两种类型的交易:读/写事务(事务())和只读事务(readTransaction())。请注意,读或者写操作将会锁住整个数据库。
Step 1. 打开数据库
数据库需要打开才可以访问。您需要定义名称,版本,描述和数据库的大小。
webdb.db = null;
webdb.open = function () {
var dbSize = 5 * 1024 * 1024; // 5MB
webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}
webdb.onError = function (tx, e) {
alert("There has been an error: " + e.message);
}
webdb.onSuccess = function (tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
webdb.getAllTodoItems(loadTodoItems);
}Step 2. 创建一个table
你只能通过执行 CREATE TABLE SQL 语句在一个事务中创建一个表。
我们定义了一个函数,在body的onload事件中将创建一个表。如果表不存在,将创建一个表。表名称为todo并且有3列。
ID - 一个递增顺序ID列
todo - 一个文本列项目的主体
added_on - todo项创建的时间
webdb.createTable = function () {
var db = webdb.db;
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
"todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}Step 3. 给table添加数据
我们正在建设一个todo列表管理器是非常重要的,我们能够将todo项添加到数据库中。
创建一个事务,在事务执行插入到待办事项表。
executeSql需要几个参数,执行SQL查询和绑定的参数值。
webdb.addTodo = function (todoText) {
var db = webdb.db;
db.transaction(function (tx) {
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
[todoText, addedOn],
webdb.onSuccess,
webdb.onError);
});
}Step 4. 从table中查询数据
现在，数据库中已经有了数据,您需要一个函数来获取数据。在Chrome,Webdatabase使用标准SQLite SELECT查询。
webdb.getAllTodoItems = function (renderFunc) {
var db = webdb.db;
db.transaction(function (tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
webdb.onError);
});
}要注意的是所有的这些命令中使用这个示例是异步的,因此返回的数据不是事务或executeSql的会话。结果是通过回调函数返回的。
Step 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=\'webdb.deleteTodo(" +
row.ID + ");\'>Delete</a>]</li>";
}这个方法调用的效果是todo列表的数据呈现为DOM元素,称为“todoItems”。
Step 5. 从table中删除数据
webdb.deleteTodo = function (id) {
var db = webdb.db;
db.transaction(function (tx) {
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
webdb.onSuccess,
webdb.onError);
});
}Step 6. 整合上面的函数
当页面加载时,打开数据库并且如果需要将会创建表和呈现已经在数据库中的任何todo数据项。
....function init() {
webdb.open();
webdb.createTable();
webdb.getAllTodoItems(loadTodoItems);
}
</script><body onload="init();">下面的这个函数,能从dom中获取数据,并调用webdb.addTodo方法
function addTodo() {
var todo = document.getElementById("todo");
webdb.addTodo(todo.value);
todo.value = "";
}