在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數據結構很有用，但是對於大量結構化數據就無能為力了，靈活大不夠強大。
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），但是我們需要更多的獨立實現來完成標准化。
也就是說這是一個廢棄的標准了，雖然部分瀏覽器已經實現，但。。。。。。。
三個核心方法
但是我們學一下也沒什么壞處，而且能和現在W3C力推的IndexedDB做比較，看看為什么要廢棄這種方案。Web SQL Database 規范中定義的三個核心方法：
- openDatabase：這個方法使用現有數據庫或新建數據庫來創建數據庫對象
- transaction：這個方法允許我們根據情況控制事務提交或回滾
- executeSql：這個方法用於執行SQL 查詢
openDatabase
我們可以使用這樣簡單的一條語句，創建或打開一個本地的數據庫對象
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase接收五個參數：
- 數據庫名字
- 數據庫版本號
- 顯示名字
- 數據庫保存數據的大小（以字節為單位 )
- 回調函數（非必須)
如果提供了回調函數，回調函數用以調用 changeVersion() 函數，不管給定什么樣的版本號，回調函數將把數據庫的版本號設置為空。如果沒有提供回調函數，則以給定的版本號創建數據庫。
transaction
transaction方法用以處理事務，當一條語句執行失敗的時候，整個事務回滾。方法有三個參數
- 包含事務內容的一個方法
- 執行成功回調函數（可選）
- 執行失敗回調函數（可選）
db.transaction(function (context) { context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); });
這個例子中我們創建了一個table，並在表中插入三條數據，四條執行語句任何一條出現錯誤，整個事務都會回滾
executeSql
executeSql方法用以執行SQL語句，返回結果，方法有四個參數
- 查詢字符串
- 用以替換查詢字符串中問號的參數
- 執行成功回調函數（可選）
- 執行失敗回調函數（可選）
在上面的例子中我們使用了插入語句，看個查詢的例子
db.transaction(function (context) { context.executeSql('SELECT * FROM testTable', [], function (context, results) { var len = results.rows.length, i; console.log('Got '+len+' rows.'); for (i = 0; i < len; i++){ console.log('id: '+results.rows.item(i).id); console.log('name: '+results.rows.item(i).name); } });
完整示例
<!DOCTYPE HTML> <html> <head> <title>Web SQL Database</title> </head> <body> <script type="text/javascript"> var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (context) { context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); }); db.transaction(function (context) { context.executeSql('SELECT * FROM testTable', [], function (context, results) { var len = results.rows.length, i; console.log('Got '+len+' rows.'); for (i = 0; i < len; i++){ console.log('id: '+results.rows.item(i).id); console.log('name: '+results.rows.item(i).name); } }); }); </script> </body> </html>
最后
由於Web SQL Database規范已經被廢棄，原因說的很清楚，當前的SQL規范采用SQLite的SQL方言，而作為一個標准，這是不可接受的，每個瀏覽器都有自己的實現這還搞毛的標准。這樣瀏覽器兼容性就不重要了，估計慢慢會被遺忘。不過Chrome的控制台真心好用啊，神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內容看的一清二楚，免去了很多調試代碼工作。
