0

这是唯一可以找到的使用 IndexedDB 提交表单的示例，但由于旧的 setVersion 函数，它只能在 chrome 上工作，我一直试图让它工作，但我是 Javascript 和 IndexedDB 的新手。有人可以帮我恢复它在 Firefox 中的工作吗？谢谢！

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=iso-8859-1>
<script>
var DB_NAME = 'DBforms';
var STORE_NAME = 'Form';    
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB    || window.msIndexedDB;

if (window.indexedDb) {
} else if (window.webkitIndexedDB) {
    window.indexedDB = window.webkitIndexedDB;
    window.IDBTransaction = window.webkitIDBTransaction;
} else if (window.mozIndexedDB) {
    window.indexedDB = window.mozIndexedDB;
} else {
   alert("Browser does not suport HTML5´s IndexedDB!");
}       

function onUnexpectedError(e) { alert('An error as occured: ' + e.value); }

function openStore(db, callback) {
    var transaction = db.transaction(STORE_NAME, IDBTransaction.READ_WRITE);
    var store = transaction.objectStore(STORE_NAME);
    callback(store);
        function saveRow(store, row) {
    var key = new Date().getTime();
    var request = store.put(row, key);
    request.onsuccess = function() {
        alert('Form was saved');
    };
    request.onerror = onUnexpectedError;
}

function isOthergender() {
    return document.form.gender.selectedIndex == document.form.gender.length-1;
}

function saveRecord() {
    // get parameters from the form to build the record
    var gender, name, lastname, email, phone, observations, username;
    if (isOthergender())
        gender = document.form.other.value;
    else
gender = document.form.gender.options[document.form.gender.selectedIndex].value;
    name = document.form.name.value;
    lastname = document.form.lastname.value;
    email = document.form.email.value;
    phone = document.form.phone.value;
    observations = document.form.observations.value;
    username = document.form.username.value;
    var record = {'gender': gender, 'name': name, 'lastname': lastname, 'email': email, 'phone': phone, 'observations': observations, 'username': username};

**// This is what needs to be changed**
//----------------------------------------------------------------------------- 
// open db
var openDbRequest = indexedDB.open(DB_NAME);
openDbRequest.onsuccess = function (e) {
   var db = e.target.result;
   db.onerror = onUnexpectedError;

   if (!db.objectStoreNames.contains(STORE_NAME)) {     


   function createStore(db, callback) {
      var request = db.setVersion('1.0'); // setVersion tx req'd to createObjectStore

      request.onsuccess = function() {
             var store = db.createObjectStore(STORE_NAME);
         callback(store); // this executes in the setVersion tx
       };
       request.onerror = onUnexpectedError;
    }       

      // create db store and save form as row keyed by date
      createStore(db, saveRowCallback);
    } else {
     // open db store and save form as row keyed by date
     openStore(db, saveRowCallback);
    }


    function saveRowCallback(store) {
    saveRow(store, record);
    };

};

openDbRequest.onerror = function () {
alert('Allow access to IndexedDB for this webpage!');
};      
}

//--------------------------------------------------------------------

function enableOther() {
    if (isOthergender()) {
        document.form.other.disabled = false;
        document.form.other.value = 'what other?';
    } else {
        document.form.other.disabled = true;
        document.form.other.value = '';
    }
}


</script>
</head>
<body>
<form name="form">
    <table>
        <tr><td>
        <label>Gender</label>
        <select name="gender" onchange="enableOther()">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Bot">Bot</option>
            <option value="Other">Other</option>
        </select>
        </td></tr>
        <tr><td><input name="other" disabled="true"/></td></tr>
<tr><td><label>Name</label><input name="name" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Last Name</label><input name="lastname" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Email</label><input name="email" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Phone number</label><input name="phone"/></td></tr><tr/>
<tr><td><label>Observations</label></td></tr><textarea name="observations" rows="3" cols="25" wrap="soft"></textarea></td></tr>
<tr><td><label>UserName</label><input name="username" value="" size="10" maxlength="20"/></td></tr>
    </table>
    <input type="button" name="save" value="Save" onclick="saveRecord()"/>
    <input type="reset" value="Reset"/>
</form>     
</body>
</html>
4

2 回答 2

2

要在 firefox 中查看 console.log 消息，请使用 firebug 扩展。那么这至少应该让你开始：

摆脱function openStore.

var openDbRequest = indexedDB.open(DB_NAME, 1);
openDbRequest.onerror = function (e) { console.log("error " + e); }
openDbRequest.onblocked = function (e) { console.log("blocked " + e); }
openDbRequest.onupgradeneeded = function (e) {
  var db = e.target.result;
  db.createObjectStore(STORE_NAME);
  var transaction = e.target.transaction;
  transaction.oncomplete = transaction.onabort = function(e) { console.log("transaction result: " + e); }
}
openDbRequest.onsuccess = function (e) {
  var db = e.target.result;
  if (!db.objectStoreNames.contains(STORE_NAME))
    console.log(STORE_NAME + " didn't exist, weird");
  var transaction = db.transaction(STORE_NAME, IDBTransaction.READ_WRITE);
  var store = transaction.objectStore(STORE_NAME);
  var key = new Date().getTime();
  var request = store.put(row, key);
  request.onsuccess = function(e) { console.log("onsuccess"); }
  request.onerror = function(e) { console.log("onerror"); }
  transaction.oncomplete = function(e) { console.log("oncomplete"); }
  transaction.onabort = function(e) { console.log("onabort"); }
};
于 2012-09-20T23:16:27.230 回答
1

尝试使用 het 以下shim。这意味着您还需要在代码中使用 setVersion 释放所有内容，并且需要在 indexeddb 的 open 方法中提供版本参数

于 2012-09-21T05:33:35.440 回答