objectStore.add 不在 IndexedDb 中添加具有不同键的数据

Question

我想要一个从三个输入字段收集值的按钮，将它们传递给一个 javascript 函数，该函数又将它们变成一个对象并将它们输入到 IndexedDb 数据库 objectStore 中。我已经将前三个值作为对象输入，但在随后的点击中，它会将它们传递给函数，但不会将它们添加到数据库中。

function callIdb(entry1, entry2, entry3) {

    document.getElementById('registernewsletter').innerHTML = 'Check ' + entry1 + ' for New User Offer!';
    var nameI = entry1
    var ageI = entry2;
    var emailI = entry3;

    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

    if (!window.indexedDB) {
        console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
        } else { 
        console.log("You're good to go with IndexedDB");
        };

    var request = window.indexedDB.open("restaurantDatabase", 1);
    request.onerror = function(event) {
        console.log("Hi, YouFail.  PleaseTry again", event);
        };


    var restaurantData = [];
    var b = (function () {
      var c = [];
      return function () {
        c.push({name: nameI, age: ageI, email: emailI});
        return c;
        }
    })();

    var d = b();
    console.log(d);
    console.log("New data: ", d, d.isArray);
    d.forEach(function(rest) {
        console.log("I: ", d);
        });

    request.onupgradeneeded = function(event) {
        console.log('win upgrade');
        var db = event.target.result;
        console.log("OnUpgrade:  db= ", db);

        var oS = db.createObjectStore("restaurants", { keyPath: "email" });
        oS.createIndex("name", "name", { unique: false });
        oS.createIndex("email", "email", { unique: true });
        oS.createIndex("age", "age", { unique: false });

        oS.transaction.oncomplete = function(event) {
            var rTrans = db.transaction("restaurants", "readwrite").objectStore("restaurants");

            d.forEach(function(restaurant) {
                rTrans.add(restaurant);
                console.log("You followed directions! gd jb", restaurant, "stored in ", rTrans);
            });
        };
    };
    request.onupgradeneeded.onerror = function(event) {
        console.log("err", event);
    }
}

我应该从 onupgradeneeded 中删除添加吗？我认为对 db 的所有编辑都必须在此事件中。

    <form id="newsletter_form" class="newsletter_form">
        <input type="text" id="idbentry1" class="newsletter_input" placeholder="Restuarant Name" required="required">
        <input type="text" id="idbentry2" class="newsletter_input" placeholder="Years at Location">
        <input type="email" id="idbentry3" class="newsletter_input" placeholder="email">

将值插入 IndexedDb()

这是第一个表演得很好的条目：

You're good to go with IndexedDB
rapidapp.js:198 [{…}]
rapidapp.js:199 New data:  [{…}] undefined
rapidapp.js:201 I:  [{…}]
rapidapp.js:212 win upgrade
rapidapp.js:214 OnUpgrade:  db=  IDBDatabase {name: "restaurantDatabase", version: 1, objectStoreNames: DOMStringList, onabort: null, onclose: null, …}
rapidapp.js:229 You followed directions! gd jb {name: "ert", age: "ww", email: "tt"} stored in  IDBObjectStore {name: "restaurants", keyPath: "email", indexNames: DOMStringList, transaction: IDBTransaction, autoIncrement: false}

这是在 onupgradeneeded 之前停止的第二个条目。

You're good to go with IndexedDB
rapidapp.js:198 [{…}]
rapidapp.js:199 New data:  [{…}] undefined
rapidapp.js:201 I:  [{…}]

Answer 1

终于明白了：

function callIdb(entry1, entry2, entry3) {

    document.getElementById('registernewsletter').innerHTML = 'Check ' + entry1 + ' for New User Offer!';
    var nameI = entry1
    var ageI = entry2;
    var emailI = entry3;

    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

    if (!window.indexedDB) {
        console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
        } else { 
        console.log("You're good to go with IndexedDB");
        };

    var request = window.indexedDB.open("restaurantDatabase", 1);

    var b = (function () {
      var c = [];
      return function () {
        c.push({name: nameI, age: ageI, email: emailI});
        return c;
        }
    })();

    request.onerror = function(event) {
        console.log("Hi, YouFail.  PleaseTry again", event);
        };

    var d = b();
    console.log(d);
    console.log("New data: ", d, d.isArray);
    d.forEach(function(rest) {
        console.log("I: ", d);
        });

    request.onupgradeneeded = function(event) {
        console.log('(WINR.UGN)Within request.upgradeneeded');

        var db = event.target.result;
        console.log("(WINR.UGN) db:", db);

        var oS = db.createObjectStore("restaurants", { keyPath: "email" });

        oS.createIndex("name", "name", { unique: false });
        oS.createIndex("email", "email", { unique: true });
        oS.createIndex("age", "age", { unique: false });  
        };

    request.onsuccess = function(event) {
        console.log('(WOR.NS) Within request.onsuccess');
        var db = event.target.result;
        console.log("(WOR.NS) db= ", db);

        var rTrans = db.transaction("restaurants", "readwrite").objectStore("restaurants"); 

        d.forEach(function(restaurant) {
            rTrans.add(restaurant);
            console.log("You followed directions! Well done. var restaurant: ", restaurant, "stored with this transaction: ", rTrans);
            });

        rTrans.oncomplete = function () {
            console.log("CONGRATULATIONS FOOLS.");
            }
        };

    request.onupgradeneeded.onerror = function(event) {
        console.log("err", event);
        }
    }

在所有处理程序之外打开数据库（示例中为 var 请求）。
在处理程序外部声明变量（即用户输入等）。
request.onupgradeneeded 具有函数的处理程序创建 objectStore 和索引，然后该函数完成并且...
request.onsuccess 处理程序正在运行。这是您打开事务和添加数据的地方。
使用错误处理程序！

另外，这个参考在这个过程中最有帮助：https://www.w3.org/TR/IndexedDB/#dom-idbtransactionmode-readwrite。

谢谢，同行

objectStore.add 不在 IndexedDb 中添加具有不同键的数据

objectStore.add not adding data with different key in IndexedDb

javascript

forms

button

indexeddb

idbobjectstore