IndexedDB - Cursors-alljchome-开发者的教程家园

IndexedDB Tutorial

Selected Reading

IndexedDB - Cursors

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.

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

For the object store, we use the openCursor()

optionalKeyRange − we can pmit the range of how many objects we need to retrieve.

optionalDirection − we can specify the direction we want to iterate.

Example 1

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

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

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: "palp",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:  palp , branch:  EEE }
4 {id: 4, name:  deevana , branch:  CSE }
bots completed