以下代码将参数变量nextId
传递给IndexedDB
Store get方法,如果传递的参数与记录的键匹配,则返回相应的记录。
最初我创建了另一个将所有记录都放入数组的方法,然后我返回了数组长度。但是我的循环只是得到应有的最后一个值。
代码如下所示:注意:此方法getEmployeeCount()
保存数组长度并使用如下:
var something;
for ( var i = 1; i <= getEmployeeCount(); i ++ ) {
something = i;
}
实验工作代码:
function displaySingleRecord() {
var output = document.getElementById( 'display' );
output.textContent = "";
var store = getObjectStore(DB_STORE_NAME, 'readwrite');
var nextId = incre ++;
var request = store.get(nextId.toString());
request.onerror = function(e) {
dbStatusMessage('Cannot Retrieve data.', 1);
};
request.onsuccess = function(e) {
output.innerHTML = '<b>Employee ID:</b> ' + request.result.employeeId + ' <br> ' +
'<b>First Name:</b> ' + request.result.firstName + ' <br> ' +
'<b>Last Name:</b> ' + request.result.lastName + ' <br> ' +
'<b>Email:</b> ' + request.result.email + ' <br> ' +
'<b>Department:</b> ' + request.result.department;
};
}
当记录到达结束记录或最后一条记录时,如何将增量重置为1。我尝试使用输出,这是一个p标签,但没有用。
if ( output.textContent === '')
doReset;
更新: 工作解决方案:
我遇到的主要问题之一是从光标获取总记录,而不是使用此数字作为重置增量过程的阈值。以下步骤说明了我为获得解决方案所做的工作:
第一步:
我使用hidden field
来保留增量值并将其返回到执行增量的方法:我还添加了两个按钮:next
和prev
。
HTML:
<!--Hidden Field-->
<input id="currentValue" value="0" type="hidden" />
<a id="next" href="/">Next</a>
<a id="prev" href="/">Previous</a>
<!--Output value here-->
<p id="output"></p>
接下来,我需要从数据存储中获取总记录:我是通过在getTotalRecordCount
方法中获取数组的长度来实现的。
请记住,当我们增加时,我们需要知道结束是否到达,这样我们不会点击下一步并看到空结果,我们只需重置为一。注意:我们将记录数组传递给回调,以避免IndexedDB
异步架构:
从商店获取总记录的方法:
function getTotalRecordCount(callback) {
var IDBOpenRequest = indexedDB.open(Database.Name, Database.Version);
IDBOpenRequest.onerror = function () {
dbStatusMessage('Database failed to open.', 1000);
};
IDBOpenRequest.onsuccess = function (e) {
var objectStore = getObjectStore(Database.Store.USGeological,
Database.ReadWrite, e.target.result);
var record = [];
var cursorRequest = objectStore.openCursor();
cursorRequest.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
record.push(cursor.value);
cursor.continue();
} else {
callback(record);
}
};
e.target.result.close();
};
}
下一步:我们从getNextId
方法的回调中访问记录数组。
代码:
function getNextId(val) {
getTotalRecordCount(function (record){
// Get initial or current value from hidden field.
var currentValue = document.getElementById('currentValue');
var newValue = parseInt(currentValue.value,10) + val;
// Use the record array from the callbck, pass it's length.
// IMPORTANT: If our current position or count is greater
// than array length we go back to 1.
if (newValue > parseInt(record.length) || newValue <= 0) {
newValue = 1;
}
currentValue.value = newValue;
getRecordByRotatingId(newValue);
});
}
最后:我们将结果显示在屏幕上:此代码只是将增量值传递给get method
,并显示引用当前ID的数据:
注意:这是开发代码,我没有使用所有的回调事件,例如:在try catch中我故意不使用catch块中的e.message。
function getRecordByRotatingId(value) {
var output = document.getElementById('output');
output.textContent = "";
var IDBOpenRequest = indexedDB.open(Database.Name, Database.Version);
IDBOpenRequest.onerror = function () {
dbStatusMessage('Database failed to open.', 1000);
};
IDBOpenRequest.onsuccess = function (e) {
var objectStore = getObjectStore(Database.Store.USGeological,
Database.ReadOnly, e.target.result);
var request = objectStore.get(value);
request.onsuccess = function () {
try {
output.innerHTML = '<b>State ID:</b> ' +
request.result.StateId + ' <br> ' +
'<b>State:</b> ' + request.result.StateName +
' <br> ' + '<b>Abbreviation:</b> ' +
request.result.StateAbbreviation;
} catch (e) {
dbStatusMessage('Data does not exist.', 1000);
}
};
request.onerror = function () {
dbStatusMessage('Data does not exist.', 1000);
};
e.target.result.close();
};
}
此代码在使用大数据结果集的生产中会受到性能影响,因为每次单击下一个或上一个时它都会调用光标。我们可以将总记录数放入内存(本地存储),并在每次加载页面时更新。
更新 在上面的初始更新之后,我发现您还可以使用索引计数方法获取对象库中的总记录: 有了这个,我已经将方法合并为一个方法:
function getRecordByNextId(val) {
var IDBOpenRequest = indexedDB.open(Database.Name, Database.Version);
IDBOpenRequest.onerror = function () {
dbStatusMessage('Database failed to open.', 1000);
};
IDBOpenRequest.onsuccess = function (e) {
var output = document.getElementById('output');
output.textContent = "";
var objectStore = getObjectStore(Database.Store.USGeological,
Database.ReadOnly, e.target.result);
var myIndex = objectStore.index('StateName');
var request = myIndex.count();
request.onsuccess = function () {
var currentValue = document.getElementById('currentValue');
var newValue = parseInt(currentValue.value, 10) + val;
if (newValue > parseInt(request.result) || newValue <= 0) {
newValue = 1;
}
currentValue.value = newValue;
var dataRequest = objectStore.get(parseInt(currentValue.value));
dataRequest.onsuccess = function (e) {
output.innerHTML = '<b>State ID:</b> ' + dataRequest.result.StateId
+ ' <br> ' + '<b>State:</b> ' + dataRequest.result.StateName +
' <br> ' + '<b>Abbreviation:</b> ' +
dataRequest.result.StateAbbreviation;
};
};
e.target.result.close();
};
}
答案 0 :(得分:0)
function iterateEmployees(db) {
var tx = db.transaction(DB_STORE_NAME);
var store = tx.objectStore(DB_STORE_NAME);
var request = store.openCursor();
request.onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
var employee = cursor.value;
printEmployeeDetails(employee);
cursor.continue(); // advance the cursor by 1
} else {
// no more employees, or no employees found at all
doSomethingAfterListingEmployees();
}
};
}
function printEmployeeDetails(employee) {
output.innerHTML += '<p>Id: ' + employee.employeeId + '</p>' +
'etc ...';
}
编辑,在阅读评论后,您可能想要做的是了解cursor.advance。见https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor/advance。你可以做的是每次用户点击按钮时打开一个光标,然后通过每次用户点击按钮时递增的计数器前进。