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();
        };
    };
}

IndexedDB 查询以获取单个页面

IndexedDB query to get individual page

html

javascript

indexeddb