HTML5 離線存儲 Web SQL 實戰（二）：完整應用程式碼與核心 API 深度解析

承接上篇，本文貼出一個基於 Web SQL Database 的用戶故事管理完整前端實現，並詳細解析 W3C 標準中定義的核心介面：WindowDatabase.openDatabase、SQLTransaction.executeSql、SQLResultSet 及 SQLResultSetRowList，幫助開發者建立扎實的 API 心智模型。

完整應用程式碼片段

var _userStoryProvider = new userStoryProvider();
$(document).ready(function () {
    loadUserStory();
    $("#btnAdd").click(function () {
        var item = { role: $("#role").val(), ability: $("#ability").val(), benefit: $("#benefit").val(),
            name: $("#Name").val(), importance: $("#Importance").val(), estimate: $("#Estimate").val(), notes: $("#Notes").val() };
        try {
            _userStoryProvider.addUserStory(item.role, item.ability, item.benefit, item.name, item.importance, item.estimate, item.notes);
            loadUserStory();
        } catch (error) { alert("_userStoryProvider.addUserStory:" + error); }
    });
    // 建表、刪表、載入邏輯同理...
});

function loadUserStory() {
    try {
        _userStoryProvider.loadUserStorIEs(function (result) {
            var _userStorIEs = [];
            for (var i = 0; i < result.rows.length; i++) {
                var o = result.rows.item(i);
                _userStorIEs.push(new userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes));
            }
            // 渲染表格邏輯...
        });
    } catch (error) { alert("_userStoryProvider.loadUserStorIEs:" + error); }
}

核心 API 速查

1. WindowDatabase.openDatabase(name, version, displayName, estimatedSize, creationCallback)
   建立/開啟資料庫連線，回傳 Database 物件。支援同步/非同步兩種模式。
2. SQLTransaction.executeSql(sqlStatement, arguments[], callback, errorCallback)
   在交易中執行 SQL，支援參數化查詢防注入。回呼函數接收 SQLTransaction 與 SQLResultSet。
3. SQLResultSet 包含 insertId、rowsAffected、rows (SQLResultSetRowList)。
4. SQLResultSetRowList 類陣列物件，提供 length 與 item(index) 方法逐列讀取。

提醒： Web SQL 規範已停止維護（瀏覽器廠商傾向 IndexedDB），但理解其事務模型與 SQL 執行流程，對掌握客戶端資料庫編程範式仍有參考價值。