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