Indexeddb 简明教程

IndexedDB - Cursors

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

首先我们使用 open cursor 函数，然后我们可以向其中添加我们的参数。我们可以在 openCursor() 函数中插入的参数如下：

  1. 利用键范围限制对象范围

  2. 我们希望迭代的方向

以下是游标的语法

Syntax

ObjectStore.openCursor(optionalKeyRange, optionalDirection);

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

  1. optionalKeyRange - 我们可以限制我们需要检索的对象范围。

  2. optionalDirection - 我们可以指定我们希望迭代的方向。

Example 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");
   }
};

Example 2

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

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() 函数的示例 −

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 Example

按照如下内容实现游标函数使用情况的 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>

Output

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