使用WebSQL輸入數據

Question

在Chrome擴展程序中使用WebSQL時遇到了一些麻煩。 （這是我第一次使用它）我找到了本教程，並試圖使其適應我的需求： http : //www.html5rocks.com/zh-CN/tutorials/webdatabase/todo/

這是我的代碼：

var favourites = {};
favourites.webdb = {};

favourites.webdb.db = null;

favourites.webdb.open = function () {
  var dbSize = 5 * 1024 * 1024; // 5MB
  favourites.webdb.db = openDatabase("favourites", "1", "Favourites Database", dbSize);
};

favourites.webdb.onError = function(tx, e) {
  alert("There has been an error: " + e.message);
};

favourites.webdb.onSuccess = function(tx, r) {
  // re-render the data.
  // loadTodoItems is defined in Step 4a
  favourites.webdb.getAllTiles(loadTiles);
};


favourites.webdb.createTable = function() {
  var db = favourites.webdb.db;
  db.transaction(function(tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                  "tiles(ID INTEGER PRIMARY KEY ASC, name, colour, width, linkURL, imgURL)", []);
  });
};


favourites.webdb.addTile = function(tileName, tileColour, tileWidth, tileLinkURL, tileImgURL) {
  var db = favourites.webdb.db;
  db.transaction(function(tx){
    tx.executeSql("INSERT INTO tiles(name, colour, width, linkURL, imgURL) VALUES (?,?,?,?,?)",
        [tileName, tileColour, tileWidth, tileLinkURL, tileImgURL],
        favourites.webdb.onSuccess,
        favourites.webdb.onError);
   });
};

function loadTiles(tx, rs) {
  var rowOutput = "";
  var todoItems = document.getElementById("tiles");
  for (var i=0; i < rs.rows.length; i++) {
    rowOutput += renderTile(rs.rows.item(i));
  }

  tiles.innerHTML = rowOutput;
}
function renderTile(row) {
  return "<a href='" + row.tileLinkURL + "'>" +
      "<div class='mdl-js-button mdl-js-ripple-effect tile' style='background-color:" + row.tileColour + "; width:" + row.tileWidth + "px;'>" +
      "<img class='tileimg' src='" + row.tileImgURL + "'>" +
      "</div>" +
      "</a>";
};


favourites.webdb.deleteTile = function(id) {
  var db = favourites.webdb.db;
  db.transaction(function(tx){
    tx.executeSql("DELETE FROM tiles WHERE ID=?", [id],
        favourites.webdb.onSuccess,
        favourites.webdb.onError);
    });
};


function init() {
  favourites.webdb.open();
  favourites.webdb.createTable();
  //favourites.webdb.getAllTiles(loadTiles);
};

嘗試將數據添加到數據庫時出現錯誤： http : //i.imgur.com/AGoBP9X.png

有人可以解釋我的代碼出了什么問題嗎？

Answer 1

我的第一個猜測是favourites.webdb.db === null ，因此沒有方法transaction 。

因此，我將檢查init是否真正被調用。 （如果是，則檢查openDatabase的verison參數是否正確。在我發現的文檔中，它應該是"1.0"不是"1" 。