前言
在上一篇前端存儲之indexedDB中說到，我們項目組要搞一個前后端分離的項目，要求在前端實現存儲，我們首先找到了indexedDB，而我們研究了一段時間的indexedDB后，發現它並不是很適合我們的項目，原因文章后面會講到，所以我們就繼續找，於是我們就找到了Web Sql Database，發現這個前端數據庫是比較適合我們的項目的，於是果斷轉投Web Sql Database的懷抱，找存儲工具跟穿鞋一個道理，不在乎多炫酷，合適才是王道，要是因為不合適導致磨腳是走不長遠的，既然找到了合適的鞋，不對，合適的存儲數據庫，當然接下里就是要摸清楚它的性格脾氣啊，才能更好地為我們所用，於是便有了這篇文章。
Web Sql Database為何方神聖？
Web Sql Database又名html5本地數據庫，是隨着HTML5規范加入的在瀏覽器端運行的輕量級數據庫。在HTML5中，大大豐富了客戶端本地可以存儲的內容，添加了很多功能來將原本必須保存在服務器上的數據轉為保存在客戶端本地，從而大大提高了Web應用程序的性能，減輕了服務器端的負擔，使Web時代重新回到了“客戶端為重，服務器為輕”的時代。可以看出，它的用途還是很大的，像對於一些經常需要檢索的數據，可以先將其從后台取出，保存到web sql Database中，下次再使用的時候，就不需要再到后台檢索了，從而減少對服務器的請求次數，還有就是可以通過web sql Database來做一些離線操作，因為數據已經保存在web sql Database中了。
Web Sql Database的API實際上不是HTML5規范的組成部分，而是單獨的規范。它通過一套API來操縱客戶端的數據庫。Safari、Chrome、Firefox、Opera等主流瀏覽器都已經支持Web SQL Database。學過數據庫的人使用web sql數據庫時，就會發現其實它非常有趣，因為你會發現它的存儲風格跟我們的mysql之類的數據庫很類似，你可以像操作mysql之類的數據庫一樣操作本地的數據庫，很容易上手。雖然 W3C 官方在 2011 年 11 月聲明已經不再維護 Web SQL Database 規范，但由於其廣泛的實現程度，了解這些 API 對 Web 開發還是非常有必要的。
Web Sql Database VS indexedDB
機智的小伙伴或許已經看出來了，Web Sql Database雖然也是一種在瀏覽器里存儲數據的技術，跟IndexedDB不同的是，WebSQL數據庫更像是關系型數據庫，而看過我前一篇文章的同學應該清楚，IndexedDB更像是一個NoSQL數據庫，使用SQL查詢數據，而我們的項目中，恰好很多地方都要做這種關聯查詢，所以WebSQL 數據庫更加適合我們，其實indexedDB也是很好，很強大的！畢竟indexedDB才是現在W3C力薦的啊。
Web Sql Database的三大核心方法
Web SQL Database使用起來真的很簡單粗暴，因為它的規范中定義的三個核心方法：
1. openDatabase：這個方法使用現有數據庫或創建新數據庫創建數據庫對象。
var db= openDatabase(數據庫名,版本,數據庫描述,數據庫大小);
eg: var db= openDatabase(“myTestDB”,”1.0”,”我的測試數據庫”,10*1024,[回調函數（可以沒有）]);
2. transaction：訪問數據庫，要借用transaction（）方法，這個方法允許我們根據情況控制事務提交或回滾。
3. executeSql：這個方法用於執行真實的SQL查詢。此方法是異步的，后續的業務邏輯可以在回調函數中處理。
這三個方法是不是一目了然，流程基本就是打開數據庫，獲取事務，然后執行sql，跟我們使用后端那些數據一毛一樣啊！
Web Sql Database的基本操作
1. 打開數據庫
if (!window.openDatabase) { console.log('該瀏覽器不支持數據庫'); return false; } //1.數據庫名字 2.數據庫版本號 3.顯示名字 4.數據庫保存數據大小（以字節Byte為單位 10M）5.回調函數（非必須） dataBase = window.openDatabase("myAutoTest.db", "1.0", "自動化測試平台數據庫數據庫", 10 * 1024 * 1024);
說說openDatabase方法，第一次會創建一個數據庫，如果已經存在了，則打開數據庫，創建的數據庫就存在本地了，應該在你的用戶數據的谷歌目錄下面，可以自己找找看，我的本地數據庫地址是：C:\Users\dengyul\AppData\Local\Google\Chrome\User Data\Default\databases。
2. 創建數據表
就是你寫一條建表的sql語句，語法跟mysql之類的數據庫一致，然后用executeSql方法執行該sql語句，解釋一下executeSql的四個參數吧，第一個表示的是查詢的字符串，第二個表示的是插入到查詢中問號所在處的字符串數據，第三個是成功時執行的回調函數。返回兩個參數：tx和執行的結果，第四個是失敗時執行的回調函數。返回兩個參數：tx和失敗的錯誤信息。
function() { dataBase.transaction( function(tx) { tx.executeSql( "create table if not exists TEMPLATE (template_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, template_name TEXT)", [], function(tx,result){ alert('創建模板表成功'); }, function(tx, error){ alert('創建模板表失敗:' + error.message); }); }); }
3. 添加數據
還是調用executeSql執行插入的sql語句
function () { dataBase.transaction(function (tx) { tx.executeSql( "insert into TEMPLATE (template_name) values(?)", ['模板1'], function () { alert('添加數據成功'); }, function (tx, error) { alert('添加數據失敗: ' + error.message); } ); });
4. 查詢數據
前面我們說過，executeSql執行成功后進入成功的回調函數，而回調函數有一個參數為result，而這個result就是查詢出來的數據集。其數據類型為 SQLResultSet，其中最重要的屬性—SQLResultSetRowList 類型的 rows 是數據集的“行”，rows 有兩個屬性：length、item，因此，獲取查詢結果的某一行某一列的值 ：result.rows[i].item[fieldname]。
function () { dataBase.transaction(function (tx) { tx.executeSql( "select * from TEMPLATE ", [], function (tx, result) { //執行成功的回調函數 //在這里對result 做你想要做的事情吧........... }, function (tx, error) { alert('查詢失敗: ' + error.message); } ); }); }
5. 更新數據
跟上面基本一致
function (id, name) { dataBase.transaction(function (tx) { tx.executeSql( "update TEMPLATE set template_name = ? where template_id = ?", [name, id], function (tx, result) { //更新后的后續處理 }, function (tx, error) { alert('更新失敗: ' + error.message); }); }); }
6. 刪除數據
跟上面一致，將sql換成刪除的語句即可，就不多做贅述了。。。。。。
總結
從上面的CRUD操作中可以看出，Web SQL Database的操作方式對傳統開發人員來說還是很友好的，所以掌握起來比較容易， 雖然說Web SQL Database 規范已經廢棄，但是學習學習還是很有必要的。通過這些 HTML5 Web SQL Database API 接口，相信以后會出現一些非常優秀的、建立在這些 API 之上的應用程序。