【转】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, , 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, , 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, , 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, , 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; 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;}
页:
[1]