html5 Web SQL Database应用例子

Biegral 2018/11/22 7:37:41 1940

原文出处：http://www.html5china.com/HTML5features/WebSQLDatabases/20110926_2029.html
JavaScript Code复制内容到剪贴板
  1. //1. initialization  
  2.   
  3. var localDB = null;  
  4.   
  5. function onInit(){  
  6.     try {  
  7.         if (!window.openDatabase) {  
  8.             updateStatus("Error: DB not supported");  
  9.         }  
  10.         else {  
  11.             initDB();  
  12.             createTables();  
  13.             queryAndUpdateOverview();  
  14.         }  
  15.     }   
  16.     catch (e) {  
  17.         if (e == 2) {  
  18.             updateStatus("Error: Invalid database version.");  
  19.         }  
  20.         else {  
  21.             updateStatus("Error: Unknown error " + e + ".");  
  22.         }  
  23.         return;  
  24.     }  
  25. }  
  26.   
  27. function initDB(){  
  28.     var shortName = 'stuffDB';  
  29.     var version = '1.0';  
  30.     var displayName = 'MyStuffDB';  
  31.     var maxSize = 65536; // in bytes  
  32.     localDB = window.openDatabase(shortName, version, displayName, maxSize);  
  33. }  
  34.   
  35. function createTables(){  
  36.     var query = 'CREATE TABLE IF NOT EXISTS items(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, amount VARCHAR NOT NULL, name VARCHAR NOT NULL);';  
  37.     try {  
  38.         localDB.transaction(function(transaction){  
  39.             transaction.executeSql(query, [], nullDataHandler, errorHandler);  
  40.             updateStatus("Table 'items' is present");  
  41.         });  
  42.     }   
  43.     catch (e) {  
  44.         updateStatus("Error: Unable to create table 'items' " + e + ".");  
  45.         return;  
  46.     }  
  47. }  
JavaScript Code复制内容到剪贴板
  1. //2. query db and view update  
  2.   
  3. // event handler start with on*  
  4.   
  5.   
  6. function onUpdate(){  
  7.     var id = document.itemForm.id.value;  
  8.     var amount = document.itemForm.amount.value;  
  9.     var name = document.itemForm.name.value;  
  10.     if (amount == "" || name == "") {  
  11.         updateStatus("'Amount' and 'Name' are required fields!");  
  12.     }  
  13.     else {  
  14.         var query = "update items set amount=?, name=? where id=?;";  
  15.         try {  
  16.             localDB.transaction(function(transaction){  
  17.                 transaction.executeSql(query, [amount, name, id], function(transaction, results){  
  18.                     if (!results.rowsAffected) {  
  19.                         updateStatus("Error: No rows affected");  
  20.                     }  
  21.                     else {  
  22.                         updateForm("", "", "");  
  23.                         updateStatus("Updated rows:" + results.rowsAffected);  
  24.                         queryAndUpdateOverview();  
  25.                     }  
  26.                 }, errorHandler);  
  27.             });  
  28.         }   
  29.         catch (e) {  
  30.             updateStatus("Error: Unable to perform an UPDATE " + e + ".");  
  31.         }  
  32.     }  
  33. }  
  34.   
  35. function onDelete(){  
  36.     var id = document.itemForm.id.value;  
  37.       
  38.     var query = "delete from items where id=?;";  
  39.     try {  
  40.         localDB.transaction(function(transaction){  
  41.           
  42.             transaction.executeSql(query, [id], function(transaction, results){  
  43.                 if (!results.rowsAffected) {  
  44.                     updateStatus("Error: No rows affected.");  
  45.                 }  
  46.                 else {  
  47.                     updateForm("", "", "");  
  48.                     updateStatus("Deleted rows:" + results.rowsAffected);  
  49.                     queryAndUpdateOverview();  
  50.                 }  
  51.             }, errorHandler);  
  52.         });  
  53.     }   
  54.     catch (e) {  
  55.         updateStatus("Error: Unable to perform an DELETE " + e + ".");  
  56.     }  
  57.       
  58. }  
  59.   
  60. function onCreate(){  
  61.     var amount = document.itemForm.amount.value;  
  62.     var name = document.itemForm.name.value;  
  63.     if (amount == "" || name == "") {  
  64.         updateStatus("Error: 'Amount' and 'Name' are required fields!");  
  65.     }  
  66.     else {  
  67.         var query = "insert into items (amount, name) VALUES (?, ?);";  
  68.         try {  
  69.             localDB.transaction(function(transaction){  
  70.                 transaction.executeSql(query, [amount, name], function(transaction, results){  
  71.                     if (!results.rowsAffected) {  
  72.                         updateStatus("Error: No rows affected.");  
  73.                     }  
  74.                     else {  
  75.                         updateForm("", "", "");  
  76.                         updateStatus("Inserted row with id " + results.insertId);  
  77.                         queryAndUpdateOverview();  
  78.                     }  
  79.                 }, errorHandler);  
  80.             });  
  81.         }   
  82.         catch (e) {  
  83.             updateStatus("Error: Unable to perform an INSERT " + e + ".");  
  84.         }  
  85.     }  
  86. }  
  87.   
  88. function onSelect(htmlLIElement){  
  89.     var id = htmlLIElement.getAttribute("id");  
  90.       
  91.     query = "SELECT * FROM items where id=?;";  
  92.     try {  
  93.         localDB.transaction(function(transaction){  
  94.           
  95.             transaction.executeSql(query, [id], function(transaction, results){  
  96.               
  97.                 var row = results.rows.item(0);  
  98.                   
  99.                 updateForm(row['id'], row['amount'], row['name']);  
  100.                   
  101.             }, function(transaction, error){  
  102.                 updateStatus("Error: " + error.code + "<br>Message: " + error.message);  
  103.             });  
  104.         });  
  105.     }   
  106.     catch (e) {  
  107.         updateStatus("Error: Unable to select data from the db " + e + ".");  
  108.     }  
  109.      
  110. }  
  111.   
  112. function queryAndUpdateOverview(){  
  113.   
  114.     //remove old table rows  
  115.     var dataRows = document.getElementById("itemData").getElementsByClassName("data");  
  116.       
  117.     while (dataRows.length > 0) {  
  118.         row = dataRows[0];  
  119.         document.getElementById("itemData").removeChild(row);  
  120.     };  
  121.       
  122.     //read db data and create new table rows  
  123.     var query = "SELECT * FROM items;";  
  124.     try {  
  125.         localDB.transaction(function(transaction){  
  126.           
  127.             transaction.executeSql(query, [], function(transaction, results){  
  128.                 for (var i = 0; i < results.rows.length; i++) {  
  129.                   
  130.                     var row = results.rows.item(i);  
  131.                     var li = document.createElement("li");  
  132.                     li.setAttribute("id", row['id']);  
  133.                     li.setAttribute("class", "data");  
  134.                     li.setAttribute("onclick", "onSelect(this)");  
  135.                       
  136.                     var liText = document.createTextNode(row['amount'] + " x "+ row['name']);  
  137.                     li.appendChild(liText);  
  138.                       
  139.                     document.getElementById("itemData").appendChild(li);  
  140.                 }  
  141.             }, function(transaction, error){  
  142.                 updateStatus("Error: " + error.code + "<br>Message: " + error.message);  
  143.             });  
  144.         });  
  145.     }   
  146.     catch (e) {  
  147.         updateStatus("Error: Unable to select data from the db " + e + ".");  
  148.     }  
  149. }  
JavaScript Code复制内容到剪贴板
  1. // 3. misc utility functions  
  2.   
  3. // db data handler  
  4.   
  5. errorHandler = function(transaction, error){  
  6.     updateStatus("Error: " + error.message);  
  7.     return true;  
  8. }  
  9.   
  10. nullDataHandler = function(transaction, results){  
  11. }  
  12.   
  13. // update view functions  
  14.   
  15. function updateForm(id, amount, name){  
  16.     document.itemForm.id.value = id;  
  17.     document.itemForm.amount.value = amount;  
  18.     document.itemForm.name.value = name;  
  19. }  
  20.   
  21. function updateStatus(status){  
  22.     document.getElementById('status').innerHTML = status;  
  23. }  

本文转载:CSDN博客

阅读排行

分类

归档