Web SQL

在支援HTML5的瀏覽器上，已經可以撰寫出給使用者端存取的小型資料庫了，這方面可應用像是建立使用者的最愛收藏、記事功能，讓我們設計的行動版網站或手機APP可以記錄各種需要長期儲存在使用者端的資料。這方面的資料庫技術，有LocalStorage, WebSQL, IndexDB三種主要規格，而基於一些理由，大家都是選擇採用Web SQL。

在開始學習Web SQL之前，還要瞭解一個工具，在Chrome瀏覽器的[工具]>[開發人員工具]所開啟的分割視窗中，[Resources]之下就可以查看[Web SQL]內容。我們在練習Web SQL程式時需要利用這個工具做觀察，才能知道是否有正確建立存取資料。(這裡有一個例子可以先開啟練習如何觀察Web SQL資料庫)

好的，來練習這個簡單的例子(jsfiddle) (jsbin)，另一個中規中矩的例子，假設要用Web SQL讓使用者建立自己的聯絡人資料庫(jsfiddle) (jsbin)，重要語法就下列這三招：

openDatabase( ) : This method creates the database object either using existing database or creating new one.
transaction( ) : This method give us the ability to control a transaction and performing either commit or rollback based on the situation.
executeSql( ) : This method is used to execute actual SQL query.

更多說明可看Using the JavaScript Database，只要你對SQL有概念就應該很容易瞭解。但是，如果完全沒有SQL的概念，建議先從w3schools的SQL教學範例(及Try it)開始學習，也可以參考W3C Working Group Note - Web SQL Database。

HTML5的Web SQL是很重要的，未來在開發行動網頁或手機APP一定會用到的。不過，使用Web SQL要注意非同步的問題：Html5 WebSql transaction behaves strangely with alert，這個問題與Javascrit程式可以非同步執行的情況差不多、解決方案也一樣就是善用(jQuery) Callback Function：JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.To prevent this, you can create a callback function.A callback function is executed after the current effect is finished. 而Web SQL的Callbak寫法最簡單的例子就像這個：WebSQL and Javascript Order of Operation

db.transaction(

        function (transaction) {

        transaction.executeSql(

        'SELECT * FROM contacts WHERE id = ?;',

        [id],

        function (transaction, result) {

           alert("1");

           if (result.rows.length != 0) {

            user = result.rows.item(0).name;

           } else {}

        },

        errorHandler);

    });

alert("2");

message = id + '%1E' + name;

db.transaction的非同步執行方式令程式設計人員感到困擾，在大括號裡面的callbacks程式碼可能還都沒完成，但db.transaction卻會立刻返回去執行它的下一行程式碼。所以可能會變成db.transaction下面的程式碼之執行動作先完成得到結果，但db.transaction大括號裡面的callbacks程式碼還在執行中，而且有可能被干擾中斷而未完成。所以，程式的寫法一定是將所有db.transaction與tx.executeSql後面要做的動作都包進去它的的大括號裡面的callbacks程式碼，那就能保證一定會排在更後面的順序才執行到。

瞭解上述的Web SQL程式設計概念之後，更進一步就可以自己再練習做出通訊錄或便利貼的功能囉，可以參考下列的教學範例：