IndexedDB - 游标

我们使用 get() 函数来检索数据，当时我们知道想要检索哪个键，但如果我们想要逐步处理对象存储的所有值的，我们可以使用游标。

首先我们使用 open cursor 函数，然后我们可以向其添加参数。我们可以插入 openCursor() 函数的参数有 -

使用键范围限制对象范围
我们想要进行迭代的方向

以下是游标的语法

语法

ObjectStore.openCursor(optionalKeyRange, optionalDirection);

对于对象存储，我们使用 openCursor()

optionalKeyRange - 我们可以限制我们需要的检索的对象范围。
optionalDirection - 我们可以指定我们想要进行迭代的方向。

范例 1

此范例中，我们学习如何使用 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"); 
   } 
};

范例 2

当我们想要从对象存储中检索所有对象并将其放入数组中时。

var student = [];
objectStore.openCursor().onsuccess = event => { 
   var cursor = event.target.result; 
   if (cursor) { 
      student.push(cursor.value); 
      cursor.continue(); 
   } else { 
      document.write(student); 
   } 
};

范例 3

以下列出了在 JavaScript 中执行 openCursor() 函数的另一个范例 -

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

或者，如果我们想要指定方向 -

objectStore.openCursor(boundKeyRange, "prev").onsuccess = event => { 
   var cursor = event.target.result; 
   if (cursor) { 
      cursor.continue(); 
   }
};

HTML 范例

执行游标函数用途的 HTML 脚本如下 -

<!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>

输出

database opened successfully
1 {id: 1, name: 'jason', branch: 'IT'}
2 {id: 2, name: 'praneeth', branch: 'CSE'}
3 {id: 3, name: 'palli', branch: 'EEE'}
4 {id: 4, name: 'deevana', branch: 'CSE'}
bots completed

打印页面

上一个

下一个