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

【问题标题】：objectStore.add not adding data with different key in IndexedDbobjectStore.add 不在 IndexedDb 中添加具有不同键的数据
【发布时间】：2019-02-15 23:44:04
【问题描述】：

我想要一个按钮，它从三个输入字段收集值，将它们传递给一个 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:  [{…}]

【问题讨论】：

是的，“从 onupgradeneeded 中取出添加”。只有当indexedDB.open 的版本参数增加时，才会调用该函数。将添加对象的代码移至indexedDB.open 的成功处理程序。
那么 onupgradeneeded 应该是什么？分配var db？对象存储呢？交易发生在内部还是外部？所有的文献要么没有关注，要么没有具体说明这篇文章的范围。提前致谢。
按照惯例，在 upgradeneeded 中进行创建或删除存储和索引的调用，或者在架构更改时执行数据库版本之间发生的任何数据迁移任务。将其他所有内容放在成功处理程序中。

标签： javascript forms button indexeddb idbobjectstore

【解决方案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 处理程序正在运行。您可以在此处打开事务并添加数据。
使用错误处理程序！

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

谢谢，同行

【讨论】：