HTML5 內置本地數據庫之Sqlite
一、關於HTML5和web本地數據庫
SQLite 可以很好的支持關系型數據庫所具備的一些基本特征，如標准SQL語法、事物、數據表和索引等，且占用資源較少，可在移動設備上輕松使用。
HTML5中添加了很多功能，將一些以前必須保存在服務器上的數據轉向本地保存，提高了Web應用程序性能的同時還減輕了服務器的負擔。然而關於Web SQL Database有一個不太好的消息（來自網絡）：
我們經常在數據庫中處理大量結構化數據，Html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數據庫的 API，這些 API 是異步的，規范中使用的是SQLlite，悲劇正是產生於此，Web SQL Database規范頁面有着這樣的聲明
This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思就是
這個文檔曾經在W3C推薦規范上，但規范工作已經停止了。目前已經陷入了一個僵局：目前的所有實現都是基於同一個SQL后端（SQLite），但是我們需要更多的獨立實現來完成標准化。
也就是說這是一個廢棄的標准了，雖然部分瀏覽器已經實現
一上來就潑涼水確實不太好 ，但是學習一下總歸沒有什么壞處的，對吧？
目前我已知的支持Web SQL Database的瀏覽器有chrome（估計還有別的，只是我沒用到~），然而火狐和IE並不支持。
W3C目前力推的H5本地數據庫是IndexedDB
二、H5 Sqlite數據庫三個核心API
opendatabase：使用現有數據庫或創建新數據庫創建數據庫對象
var db = openDatabase('myTel','1.0','test db',1024*100); //四個參數分別是數據庫名 版本 數據庫描述 大小 //當該數據庫不存在的時候創建並打開數據庫，否則直接打開數據庫。 //創建的數據庫存於本地瀏覽器的Cache 文件夾。- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
transaction：事務，可根據情況控制事務提交或回滾
db.transaction(callback)
//用作事務處理，來操作數據庫 - 1
- 2
- 3
- 1
- 2
- 3
executeSql：用於執行SQL查詢
db.transaction(function(tx){ tx.executeSql('SQL語句',[參數數組],dataHandler,errorHandler) }) //executeSql的四個參數： //1、操作數據庫的SQL語句 //2、SQL語句中使用的參數的數組 //3、語句操作成功調用的方法 //4、語句操作失敗調用的方法- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
關於dataHandler和errorHandler:
function dataHandler(transaction,results); // 其中，results的rows屬性中保存了查詢到的每一條記錄，rows.length屬性可以獲取記錄的條數 // 可使用rows[index]或rows[item]來單獨取到某條記錄 function errorHandler(transaction,errMsg);- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
三、一個例子
下面使用一個比較完整的例子來演示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sqlite</title> </head> <body onload="init()"> <!-- 創建數據庫對象、使用事務進行數據庫操作 --> 姓名：<input type="text" id="name"/> 電話：<input type="text" id="tel" /> <input type="button" value="保存" onclick="saveData()" /> <hr/> <input type="button" onclick="showAllData()" value="顯示全部"> <input type="button" onclick="delAllData()" value="清空全部"> <hr/> <table id="datatable" border="1"> </table> <p id="'msg"></p> </body> <script type="text/javascript"> var datatable = null; var db = openDatabase('myTel','1.0','test db',1024*100);//數據庫名 版本 數據庫描述 大小 function init(){//初始化工作 datatable = document.getElementById('datatable'); showAllData(); } function removeAllData(){//移除頁面上展示的數據 for(var i = datatable.childNodes.length-1;i>=0;i--){ datatable.removeChild(datatable.childNodes[i]); } var tr = document.createElement('tr'); var th1 = document.createElement('th'); var th2 = document.createElement('th'); th1.innerHTML = '姓名'; th2.innerHTML = '電話'; tr.appendChild(th1); tr.appendChild(th2); datatable.appendChild(tr); } function showData(row){//顯示數據 var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = row.name; var td2 = document.createElement('td'); td2.innerHTML = row.tel; tr.appendChild(td1); tr.appendChild(td2); datatable.appendChild(tr); } function showAllData(){//顯示所有數據 db.transaction(function (tx){ tx.executeSql('create table if not exists TelData(name TEXT,tel TEXT)',[],function(tx,res){ },function(tx,err){ alert(err.message) }); tx.executeSql('select * from TelData',[],function(tx,result){ removeAllData(); for(var i = 0 ;i<result.rows.length;i++){ showData(result.rows.item(i)); } }) }) } function saveData(){//保存數據 var name = document.getElementById('name').value; var tel = document.getElementById('tel').value; addData(name,tel); showAllData(); } function addData(name,tel){//添加數據 db.transaction(function(tx){ tx.executeSql('insert into TelData values(?,?)',[name,tel],function(tx,rs){ alert('yes'); }, function (tx,err){ alert(err.source +'===='+err.message); }) }) } function delAllData(){//刪除所有數據 db.transaction(function(tx){ tx.executeSql('delete from TelData',[],function(tx,res){ alert('刪除成功~'); },function (tx,err){ alert('刪除失敗'+err.message); }) }) showAllData(); } </script> </html>