个人中心
gpt4 book ai didi

javascript - 从旧的indexedDB setVersion 升级到新的indexedDB.open 函数？

转载 作者：行者123 更新时间：2023-11-28 20:50:36 25 4
gpt4 key购买 nike

这是使用 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>

最佳答案

要在 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"); }
};

关于javascript - 从旧的indexedDB setVersion 升级到新的indexedDB.open 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12521157/

25 4 0
文章推荐： javascript - 带 jquery 的全屏图像 slider
文章推荐： javascript - 为 jQuery UI 对话框创建可选的多个按钮
文章推荐： javascript - 水平下拉菜单鼠标悬停问题
文章推荐： ios - UITableView vs UICollectionView vs UIScrollView？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com