Indexeddb 简明教程
IndexedDB - Cursors
在检索数据时，当我们知道想要检索哪个键时，我们使用了 get() 函数，但如果我们想要逐个浏览对象存储的所有值，我们可以使用游标。
In retrieving data we used the get() function when we knew what key we wanted to retrieve but if we want to step through all the values of the object store we can use cursors.
首先我们使用 open cursor 函数，然后我们可以向其中添加我们的参数。我们可以在 openCursor() 函数中插入的参数如下：
Firstly we use the open cursor function and then we can add our arguments to it. The arguments which we can insert in openCursor() function are −
-
Limit the range of objects by using a key range
-
The direction in which we want to iterate
以下是游标的语法
Following is the syntax of cursors
Syntax
ObjectStore.openCursor(optionalKeyRange, optionalDirection);对于对象存储，我们使用 openCursor()
For the object store, we use the openCursor()
-
optionalKeyRange − we can limit the range of how many objects we need to retrieve.
-
optionalDirection − we can specify the direction we want to iterate.
Example 1
在此示例中，我们了解如何使用 JavaScript 打开游标函数：
In this example, we learn how to open a cursor function using JavaScript −
var objectStore = db.transaction("student").objectStore("student”);
objectStore.openCursor().onsuccess = event => {
var cursor = event.target.result;
if (cursor) {
document.write("Name" + cursor.key + cursor.value.name);
cursor.continue();
} else {
document.write("entries closed");
}
};Example 2
当我们想从对象存储中检索所有对象并将其放置到数组中时。
When we want to retrieve all objects from the object store and place them in an array.
var student = [];
objectStore.openCursor().onsuccess = event => {
var cursor = event.target.result;
if (cursor) {
student.push(cursor.value);
cursor.continue();
} else {
document.write(student);
}
};Example 3
下面是另一个使用 JavaScript 中的 openCursor() 函数的示例 −
Given below is another example to implement the openCursor() function in JavaScript −
var singleKeyRange = IDBKeyRange.only("Jason");
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Praneeth");
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("jason", true);
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("praneeth", true);
var boundKeyRange = IDBKeyRange.bound("jason", "praneeth", false, true);
index.openCursor(boundKeyRange).onsuccess = event => {
var cursor = event.target.result;
if (cursor) {
cursor.continue();
}
};或者如果我们想给出方向 −
or else if we want to give the direction −
objectStore.openCursor(boundKeyRange, "prev").onsuccess = event => {
var cursor = event.target.result;
if (cursor) {
cursor.continue();
}
};HTML Example
按照如下内容实现游标函数使用情况的 HTML 脚本 −
The HTML script to implement the usage of cursor function is given as follows −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
const request = indexedDB.open("botdatabase",1);
request.onupgradeneeded = function(){
const db = request.result;
const store = db.createObjectStore("bots",{ keyPath: "id"});
store.createIndex("branch_db",["branch"],{unique: false});
}
request.onsuccess = function(){
document.write("database opened successfully");
const db = request.result;
const transaction=db.transaction("bots","readwrite");
const store = transaction.objectStore("bots");
const branchIndex = store.index("branch_db");
store.add({id: 1, name: "jason",branch: "IT"});
store.add({id: 2, name: "praneeth",branch: "CSE"});
store.add({id: 3, name: "palli",branch: "EEE"});
store.add({id: 4, name: "abdul",branch: "IT"});
store.put({id: 4, name: "deevana",branch: "CSE"});
const req = store.openCursor();
req.onsuccess = function(){
const cursor = req.result;
if(cursor){
const key = cursor.key;
const value = cursor.value;
document.write(key,value);
cursor.continue();
} else {
document.write("bots completed");
}
}
transaction.oncomplete = function(){
db.close;
}
}
</script>
</body>
</html>