【转】html5 Web SQL Database应用例子

//1. initializationvar localDB = null;function onInit(){    try {        if (!window.openDatabase) {            updateStatus("Error: DB not supported");        }        else {            initDB();            createTables();            queryAndUpdateOverview();        }    }     catch (e) {        if (e == 2) {            updateStatus("Error: Invalid database version.");        }        else {            updateStatus("Error: Unknown error " + e + ".");        }        return;    }}function initDB(){    var shortName = 'stuffDB';    var version = '1.0';    var displayName = 'MyStuffDB';    var maxSize = 65536; // in bytes    localDB = window.openDatabase(shortName, version, displayName, maxSize);}function createTables(){    var query = 'CREATE TABLE IF NOT EXISTS items(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, amount VARCHAR NOT NULL, name VARCHAR NOT NULL);';    try {        localDB.transaction(function(transaction){            transaction.executeSql(query, [], nullDataHandler, errorHandler);            updateStatus("Table 'items' is present");        });    }     catch (e) {        updateStatus("Error: Unable to create table 'items' " + e + ".");        return;    }}//2. query db and view update// event handler start with on*function onUpdate(){    var id = document.itemForm.id.value;    var amount = document.itemForm.amount.value;    var name = document.itemForm.name.value;    if (amount == "" || name == "") {        updateStatus("'Amount' and 'Name' are required fields!");    }    else {        var query = "update items set amount=?, name=? where id=?;";        try {            localDB.transaction(function(transaction){                transaction.executeSql(query, [amount, name, id], function(transaction, results){                    if (!results.rowsAffected) {                        updateStatus("Error: No rows affected");                    }                    else {                        updateForm("", "", "");                        updateStatus("Updated rows:" + results.rowsAffected);                        queryAndUpdateOverview();                    }                }, errorHandler);            });        }         catch (e) {            updateStatus("Error: Unable to perform an UPDATE " + e + ".");        }    }}function onDelete(){    var id = document.itemForm.id.value;        var query = "delete from items where id=?;";    try {        localDB.transaction(function(transaction){                    transaction.executeSql(query, [id], function(transaction, results){                if (!results.rowsAffected) {                    updateStatus("Error: No rows affected.");                }                else {                    updateForm("", "", "");                    updateStatus("Deleted rows:" + results.rowsAffected);                    queryAndUpdateOverview();                }            }, errorHandler);        });    }     catch (e) {        updateStatus("Error: Unable to perform an DELETE " + e + ".");    }    }function onCreate(){    var amount = document.itemForm.amount.value;    var name = document.itemForm.name.value;    if (amount == "" || name == "") {        updateStatus("Error: 'Amount' and 'Name' are required fields!");    }    else {        var query = "insert into items (amount, name) VALUES (?, ?);";        try {            localDB.transaction(function(transaction){                transaction.executeSql(query, [amount, name], function(transaction, results){                    if (!results.rowsAffected) {                        updateStatus("Error: No rows affected.");                    }                    else {                        updateForm("", "", "");                        updateStatus("Inserted row with id " + results.insertId);                        queryAndUpdateOverview();                    }                }, errorHandler);            });        }         catch (e) {            updateStatus("Error: Unable to perform an INSERT " + e + ".");        }    }}function onSelect(htmlLIElement){var id = htmlLIElement.getAttribute("id");query = "SELECT * FROM items where id=?;";    try {        localDB.transaction(function(transaction){                    transaction.executeSql(query, [id], function(transaction, results){                            var row = results.rows.item(0);                                updateForm(row['id'], row['amount'], row['name']);                            }, function(transaction, error){                updateStatus("Error: " + error.code + "<br>Message: " + error.message);            });        });    }     catch (e) {        updateStatus("Error: Unable to select data from the db " + e + ".");    }   }function queryAndUpdateOverview(){//remove old table rows    var dataRows = document.getElementById("itemData").getElementsByClassName("data");    while (dataRows.length > 0) {        row = dataRows[0];        document.getElementById("itemData").removeChild(row);    };    //read db data and create new table rows    var query = "SELECT * FROM items;";    try {        localDB.transaction(function(transaction){                    transaction.executeSql(query, [], function(transaction, results){                for (var i = 0; i < results.rows.length; i++) {                                    var row = results.rows.item(i);                    var li = document.createElement("li");li.setAttribute("id", row['id']);                    li.setAttribute("class", "data");                    li.setAttribute("onclick", "onSelect(this)");                                        var liText = document.createTextNode(row['amount'] + " x "+ row['name']);                    li.appendChild(liText);                                        document.getElementById("itemData").appendChild(li);                }            }, function(transaction, error){                updateStatus("Error: " + error.code + "<br>Message: " + error.message);            });        });    }     catch (e) {        updateStatus("Error: Unable to select data from the db " + e + ".");    }}// 3. misc utility functions// db data handlererrorHandler = function(transaction, error){    updateStatus("Error: " + error.message);    return true;}nullDataHandler = function(transaction, results){}// update view functionsfunction updateForm(id, amount, name){    document.itemForm.id.value = id;    document.itemForm.amount.value = amount;    document.itemForm.name.value = name;}function updateStatus(status){    document.getElementById('status').innerHTML = status;}