web sql database 是html5废弃的一个新特性,它提供了基本的关系数据库功能,使用 `SQL` 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的方言是SQLlite
主要核心api有3个
- openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象
Database openDatabase(in DOMString name,
in DOMString version, in DOMString displayName,
in unsigned long estimatedSize, in optional DatabaseCallback creationCallback);
name:数据库名。
version:数据库版本。
displayName:显示名称。
estimatedSize:数据库预估长度(以字节为单位)。
creationCallback:回调函数。(非必须)
2. transaction:这个方法允许我们根据情况控制事务提交或回滚
void transaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback);
callback:事务回调函数,其中可以执行 SQL 语句。
errorCallback:出错回调函数。(非必须)
successCallback:执行成功回调函数。(非必须)
3. executeSql:这个方法用于执行SQL 查询
void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorCallback);
sqlStatement:SQL 语句。
arguments:SQL 语句需要的参数(?)数组。(非必须)
callback:回调函数。(非必须)
errorCallback:出错回调函数。(非必须)
完整栗子
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>html5 web sql database应用</title> </head> <body> <input type="button" value="创建表" onclick="createTable()"/> <input type="button" value="存值" onclick="save()"/> <input type="button" value="取值" onclick="queryData();" /> <input type="button" value="删除" onclick="del(1);" /> <table id="datatable" border="1"> <thead> <tr> <td>id</td> <td>text</td> </tr> </thead> <tbody></tbody> </table> <script> var db = createDB(); function createDB(){ return openDatabase(‘textDB‘, ‘1.0‘, ‘text DB‘, 2 * 1024); } function createTable(){ db.transaction(function(tx){ tx.executeSql(‘CREATE TABLE IF NOT EXISTS textTable (id unique, text)‘); }); } function insetData( id ){ db.transaction(function (tx) { tx.executeSql(‘INSERT INTO textTable (id, text) VALUES (‘+id+‘, "内容‘+id+‘")‘); }); } function save(){ for(var i = 0 ; i < 10 ; i++){ insetData( i ); } } function del(id){ db.transaction(function (tx) { if(id){ tx.executeSql(‘DELETE FROM textTable WHERE id = ? ‘, [id]); }else{ tx.executeSql(‘DELETE FROM textTable‘); } }); } function queryData(){ var tbody = document.getElementById(‘datatable‘).getElementsByTagName(‘tbody‘)[0]; empty(tbody, ‘tr‘); db.transaction(function (tx) { tx.executeSql(‘SELECT * FROM textTable‘,[],function (context, results){ // console.dir(results); var rows = results.rows, len = rows.length, i, tr,id,text; for(i = 0 ; i < len; i++){ // console.dir(rows.item(i)); id = document.createElement(‘td‘); id.innerHTML = rows.item(i).id; text = document.createElement(‘td‘); text.innerHTML = rows.item(i).text; tr = document.createElement(‘tr‘); tr.appendChild(id); tr.appendChild(text); tbody.appendChild(tr); } // 释放内存 tr = null, id = null, text = null, tbody = null; }); }); } function empty(parent, childrenName){ var childrendom = parent.getElementsByTagName(childrenName); var o = childrendom[0]; while( o != null ){ console.log(o) parent.removeChild(o); o = childrendom[0]; } } </script> </body> </html>
使用chrome的同学可以按下F12
chrome真的很强大把storage、cookies、app cache、web sql、index db等都列出来了