首页 > 代码库 > web离线应用 Web SQL Database
web离线应用 Web SQL Database
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="http://www.mamicode.com/创建表" onclick="createTable()"/> <input type="button" value="http://www.mamicode.com/存值" onclick="save()"/> <input type="button" value="http://www.mamicode.com/取值" onclick="queryData();" /> <input type="button" value="http://www.mamicode.com/删除" 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等都列出来了
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。