HTML5本地存储之简单数据库操作

JavaScript
//1. initialization 
 
var 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; 
    } 
} 
JavaScript
//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 "."); 
    } 
} 
JavaScript
// 3. misc utility functions 
 
// db data handler 
 
errorHandler = function(transaction, error){ 
    updateStatus("Error: " error.message); 
    return true; 
} 
 
nullDataHandler = function(transaction, results){ 
} 
 
// update view functions 
 
function 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; 
}