本地資料庫

雖然HTML5已經提供了功能強大的localStorage和sessionStorage,但是他們兩個都只能提供儲存簡單資料結構的數據,對於複雜的Web應用的數據卻無能為力。逆天的是HTML5提供了一個瀏覽器端的資料庫支持,允許我們直接通JS的API在瀏覽器端創建一個本地的資料庫,而且支持標準的SQL的CRUD操作,讓離線的Web應用更加方便的存儲結構化的數據。接著裡介紹一下本地資料的相關API和用法。

操作本機資料庫的最基本的步驟是:

第一步:openDatabase方法:建立一個存取資料庫的物件。

第二步:使用第一步建立的資料庫存取物件來執行transaction方法,透過此方法可以設定一個開啟事務成功的事件回應方法,在事件回應方法中可以執行SQL.

第三步:透過executeSql方法執行查詢,當然查詢可以是:CRUD。

接下來分別介紹相關的方法的參數和用法。

1. openDatabase方法

//Demo:取得或建立一個資料庫,如果資料庫不存在那麼建立之

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

openDatabase方法開啟一個已經存在的資料庫,如果資料庫不存在,它還可以建立資料庫。幾個參數意義分別是:

  • 資料庫名稱。

  • 資料庫的版本號,目前來說傳個1.0就可以了,當然可以不填;

  • 對資料庫的描述。

  • 設定分配的資料庫的大小(單位是kb)。

  • 回呼函數(可省略)。

初次呼叫時建立資料庫,以後就是建立連線了。

2. db.transaction方法

可以設定一個回呼函數,此函數可以接受一個參數就是我們開啟的交易的物件。然後透過此物件可以執行SQL腳本。

3. executeSql方法執行查詢

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

參數說明:

  • ### #####qlQuery:需要具體執行的sql語句,可以是create、select、update、delete;##################[value1,value2..]: sql語句中所有使用到的參數的數組,在executeSql方法中,將s>語句中所要使用的參數先用“?”代替,然後依次將這些參數組成數組放在第二個參數中;### ###############dataHandler:執行成功是呼叫的回呼函數,透過該函數可以獲得查詢結果集;######
  • errorHandler:執行失敗時呼叫的回呼函數;


繼續學習
||
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文网")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ask.php.cn")'); msg = '<p>数据表已创建,且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } }, null); }); </script> </head> <body> <div id="status" name="status">状态信息</div> </body> </html>