IndexedDB - 範圍

當我們不想一次獲取所有資料時，我們使用範圍。當我們只想獲取特定範圍內的資料時，我們使用範圍。我們使用IDBKeyRange物件定義範圍。此物件有 4 個方法，它們是：

upperBound()
lowerBound()
bound()
only()

語法

IDBKeyRange.lowerBound(indexKey);
IDBKeyRange.upperBound(indexKey);
IDBKeyRange.bound(lowerIndexKey, upperIndexKey);

以下是各種範圍程式碼的列表：

序號	範圍程式碼和描述
1	所有鍵 ≥ a DBKeyRange.lowerBound(a)
2	所有鍵 > a IDBKeyRange.lowerBound(a, true)
3	所有鍵 ≤ b IDBKeyRange.upperBound(b)
4	所有鍵 < b IDBKeyRange.upperBound(b, true)
5	所有鍵 ≥ a 並且 ≤ b IDBKeyRange.bound(a, b)
6	所有鍵 > a 並且 < b IDBKeyRange.bound(a, b, true, true)
7	所有鍵 > a 並且 ≤ b IDBKeyRange.bound(a, b, true, false)
8	所有鍵 ≥ a 並且 < b IDBKeyRange.bound(a, b, false, true)
9	鍵 = c IDBKeyRange.only(c)

我們通常使用索引來使用範圍，在語法中，索引鍵表示索引鍵路徑值。

示例

使用 get() 和 getAll() 方法檢索範圍程式碼的各種示例如下：

class.get(‘student’) 
class.getAll(IDBKeyRange.bound(‘science’,’math’) 
class.getAll(IDBKeyRange.upperbound(‘science’,true) 
class.getAll() 
class.getAllKeys(IDBKeyRange.lowerbound(‘student’,true))

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 upperquery =store.getAll(IDBKeyRange.upperBound('2', true));
         upperquery.onsuccess = function(){
            document.write("upperquery",upperquery.result);
         }
         transaction.oncomplete = function(){
            db.close;
         }
      }
   </script>
</body>
</html>

輸出

database opened successfully
upperquery (4) [{...}, {...}, {...}, {...}]
arg1: (4) [{...}, {...}, {...}, {...}]
0: {id: 1, name: 'jason', branch: 'IT'}
1: {id: 2, name: 'praneeth', branch: 'CSE'}
2: {id: 3, name: 'palli', branch: 'EEE'}
3: {id: 4, name: 'deevana', branch: 'CSE'}
length: 4
[[Prototype]]: Array(0)
[[Prototype]]: Object

列印頁面