標籤：style blog http color 使用 strong io 資料
web sql database 是html5廢棄的一個新特性，它提供了基本的關聯式資料庫功能，使用 `SQL` 來操縱用戶端資料庫的 API，這些 API 是非同步，規範中使用的方言是SQLlite
主要核心api有3個
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等都列出來了
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
