IndexedDB查询以获取单个页面

Question

我正在尝试在IndexedDB应用程序中加载新页面。

我有一个房间列表，当用户单击列表中的下一个房间时，它将在页面上加载该房间的详细信息。

当前，它只是跳过itemStore.openCursor().onsuccess = function(event)并结束（我知道这一点，因为我在开发人员工具中添加了断点）。

HTML （动态添加，这就是为什么有onclick属性的原因）

<li id="124">
    <small>2.&nbsp;</small>
    <a href="/static#/view/124" onclick="getPage(124)">FH102</a> 
</li>

JS

function getPage(roomId) {
        var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

    openRequest = window.indexedDB.open("rooms", 1);
    openRequest.onupgradeneeded = function() {
        var db = openRequest.result;
        var itemStore = db.createObjectStore("rooms", {keyPath: "room_id"});
        var index = itemStore.createIndex("rooms", ["room_id"]);
    };

    openRequest.onerror = function(event) {
        console.error(event);
    };

    openRequest.onsuccess = function (event) {
        var db = openRequest.result;
        db.onerror = function(event) {
            // Generic error handler for all errors targeted at this database's requests
            console.error(event.target);
            console.log("Database error: " + event.target.error.name || event.target.error || event.target.errorCode);
        };
        var transaction = db.transaction(['rooms'], "readonly");
        var itemStore = transaction.objectStore("rooms");
        var index = itemStore.index("rooms", ["room_id"]);
        console.log('DB opened');

        itemStore.openCursor().onsuccess = function(event) {
            var cursor = event.target.result;
            alert(cursor);
            if(cursor) {
              if(cursor.value.room_id == roomId) {
                    resetForm($('#room-usage'));
            /* populate form with data */
            $('#room-name').each(function () {
                $(this).html(cursor.value.room_name);  //page header
            });

            $('#prevroom').each(function () {
                $(this).val(parseInt(cursor.value.room_seq) - 1);
            });

            $('#nextroom').each(function () {
                $(this).val(parseInt(cursor.value.room_seq) + 1);
            });

            $('#sequence').each(function () {
                $(this).val(parseInt(cursor.value.room_seq));
                $.jStorage.set('currentSeqNo', cursor.value.room_seq, { TTL: 28800000 });
            });

            $('#route_number').each(function () {
                $(this).val(parseInt(cursor.value.route_number));
                $.jStorage.set('currentRouteNumber', cursor.value.route_number, { TTL: 28800000 });
            });

            $('#room_name').each(function () {
                $(this).val(cursor.value.room_name);    //hidden field
                $.jStorage.set('currentRoomName', cursor.value.room_name, { TTL: 28800000 });
            });

            $('#room_id').each(function () {
                $(this).val(cursor.value.room_id);
                $.jStorage.set('currentRoomId', cursor.value.room_id, { TTL: 28800000 });
            });

            $('#countslider').each(function () {
                $(this).attr('max',parseInt(cursor.value.capacity));
                $.jStorage.set('currentCap', cursor.value.capacity, { TTL: 28800000 });
            });

            $('#rangesettings span').each(function () {
                $(this).html(cursor.value.capacity);
            });

            window.location.assign('/static#/view/'+cursor.value.room_id);
            cursor.continue();
          } else {
            resetForm($('#room-usage'));
          }
              cursor.continue();

            } else {
                console.log('Entries all displayed.');
                if(!($.jStorage.get('reverseroute', ''))) {
                    reverseroute = 'asc';
                } else {
                    reverseroute = $.jStorage.get('reverseroute', '');
                }

                var $list = $('#mylist');

                  var directionSort = {
                      asc: function (a, b) {
                          return parseInt(a.id) < parseInt(b.id) ? -1 : 1;
                      },
                      desc: function (a, b) {
                          return parseInt(a.id) > parseInt(b.id) ? -1 : 1;
                      }
                  }

                var $items = $list.children();
                $list.empty().append($items.sort(directionSort[reverseroute]));

                appendHref(reverseroute);

                //asyncCallToPouchDb();
            }
        };

        // Close the db when the transaction is done
        transaction.oncomplete = function() {
            db.close();
        };
    };
}

Answer 1

事实证明，以上内容几乎是正确的，只是不需要cursor.continue(); -相反，它需要cursor.advance(1); -这应该是显而易见的，因为它仅从IndexedDB中检索一条记录。

这是修改后的代码。 （在变量名的末尾加上1的原因是，我已经在页面上运行了一个IndexedDB查询，并且我认为相同的变量名有点冒险。）

    function getPage(roomId) {
    var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

    openRequest1 = window.indexedDB.open("rooms", 1);

    openRequest1.onupgradeneeded = function() {
        var db1 = openRequest1.result;
        var itemStore1 = db1.createObjectStore("rooms", {keyPath: "room_id"});
        var index1 = itemStore1.createIndex("rooms", ["room_id"]);
    };

    openRequest1.onerror = function(event) {
        console.error(event);
    };

    openRequest1.onsuccess = function (event) {
        var db1 = openRequest1.result;
        db1.onerror = function(event) {
            // Generic error handler for all errors targeted at this database's requests
            console.error(event.target);
            console.log("Database error: " + event.target.error.name || event.target.error || event.target.errorCode);
        };
        var transaction1 = db1.transaction(['rooms'], "readonly");
        var itemStore1 = transaction1.objectStore("rooms");
        var index1 = itemStore1.index("rooms", ["room_id"]);
        console.log('DB opened');
        //setTimeout(function(){ alert("Hello"); }, 3000);


        itemStore1.openCursor().onsuccess = function(event) {
            var cursor = event.target.result;
            if(cursor) {
                if(cursor.value.room_id == roomId) {
                    resetForm($('#room-usage'));
                    /* populate form with data */
                    $('#room-name').each(function () {
                        $(this).html(cursor.value.room_name);  //page header
                    });

                    $('#prevroom').each(function () {
                        $(this).val(parseInt(cursor.value.room_seq) - 1);
                    });

                    $('#nextroom').each(function () {
                        $(this).val(parseInt(cursor.value.room_seq) + 1);
                    });

                    $('#sequence').each(function () {
                        $(this).val(parseInt(cursor.value.room_seq));
                        $.jStorage.set('currentSeqNo', cursor.value.room_seq, { TTL: 28800000 });
                    });

                    $('#route_number').each(function () {
                        $(this).val(parseInt(cursor.value.route_number));
                        $.jStorage.set('currentRouteNumber', cursor.value.route_number, { TTL: 28800000 });
                    });

                    $('#room_name').each(function () {
                        $(this).val(cursor.value.room_name);    //hidden field
                        $.jStorage.set('currentRoomName', cursor.value.room_name, { TTL: 28800000 });
                        //alert($.jStorage.get('currentRoomName',''));
                    });

                    $('#room_id').each(function () {
                        $(this).val(cursor.value.room_id);
                        $.jStorage.set('currentRoomId', cursor.value.room_id, { TTL: 28800000 });
                    });

                    $('#countslider').each(function () {
                        $(this).attr('max',parseInt(cursor.value.room_capacity));
                        $.jStorage.set('currentCap', cursor.value.room_capacity, { TTL: 28800000 });
                    });

                    $('#rangesettings span').each(function () {
                        $(this).html(cursor.value.room_capacity);
                    });

                    window.location.assign('/static#/view/'+cursor.value.room_id);

                    //cursor.continue();
                    cursor.advance(1);
                } else {
                    resetForm($('#room-usage'));
                }

               // cursor.continue();
              // cursor.advance(1);
            } else {
                console.log('Entries all displayed.');
                if(!($.jStorage.get('reverseroute', ''))) {
                    reverseroute = 'asc';
                } else {
                    reverseroute = $.jStorage.get('reverseroute', '');
                }

                var $list = $('#mylist');

                  var directionSort = {
                      asc: function (a, b) {
                          return parseInt(a.id) < parseInt(b.id) ? -1 : 1;
                      },
                      desc: function (a, b) {
                          return parseInt(a.id) > parseInt(b.id) ? -1 : 1;
                      }
                  }

                var $items = $list.children();
                $list.empty().append($items.sort(directionSort[reverseroute]));

                appendHref(reverseroute);

            }
        };

        // Close the db when the transaction is done
        transaction1.oncomplete = function() {
            db1.close();
        };
    };
}